Implementación de la función de barra de progreso de subida de imágenes utilizando axios

Axios es una biblioteca HTTP basada en Promise, que se puede usar en navegadores y node.js.

Características

Creación de XMLHttpRequests desde el navegador

Creación de solicitudes HTTP desde node.js

Soporte de API de Promise

Intercepción de solicitudes y respuestas

Conversión de datos de solicitud y respuesta

Cancelar la solicitud

Conversión automática de datos JSON

Soporte de defensa XSRF en el cliente

A continuación, les presento cómo implementar la barra de progreso de subida de imágenes utilizando axios, y la descripción específica se muestra a continuación:

　En el proyecto reciente que realicé, una página de teléfono debe subir decenas de imágenes, aunque se ha aplicado una compresión a las fotos, al final sigue siendo grande. Si se usa una tarjeta de red, el tiempo de subida es terrible. Si está en modo de carga constante, el usuario no sabe cuánto ha subido. Para mostrar el progreso de la subida de manera más intuitiva, es mejor mostrar una barra de progreso y el porcentaje de subida;

　　El proyecto utiliza el framework vuejs, mint-ui actúa como framework de ui; solicita axios recomendado por la oficial de vue (¡es realmente potente!); en la introducción oficial de axios se explica cómo usar nativamenteEvento de progreso de subidaConsulte aquí para obtener detalles (aquí hay una introducción oficial de axios en chino):

 onUploadProgress: function (progressEvent) {
  // Tratamiento del evento de progreso nativo
 },

　　Debido a que se utiliza vuejs, para facilitar la gestión de datos de la interfaz, es necesario gestionar de manera uniforme. Si se coloca en cada componente, no es conveniente para la mantenimiento y gestión futuras; en el archivo reqwest.js, se define un método uploadPhoto, que tiene tres parámetros,分别是参数，y dos funciones de devolución de llamada, el parámetro es los parámetros necesarios para subir la imagen; y la primera función de devolución de llamada es obtener los datos de progreso de subida, la segunda función de devolución de llamada es obtener los datos de éxito o fracaso de la subida, los datos devueltos por el servidor para realizar la siguiente operación en la página.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //Evento nativo de progreso de subida
        if(progressEvent.lengthComputable){
          //La propiedad lengthComputable principal indica si la cantidad total de trabajo que debe realizarse y la cantidad de trabajo ya completada pueden medirse
          //Si lengthComputable es false, no se puede obtener progressEvent.total y progressEvent.loaded
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    }
  }

usar mint-el componente Progress dentro del componente ui, en el método data se define la variable precent del componente, que es de tipo number, al definirlo, preste atención a;　

<mt-progress :value="precent" :bar-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

Importe el archivo reqwest.js, obtenga el método uploadPhoto, según el progreso de subida obtenido, utilice la propiedad $nextTick para actualizar en tiempo real la página.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   }
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('La subida de imágenes ha sido exitosa').then(action => {
     console.log('ok');
    });
  }
}

　　De acuerdo con el método mencionado anteriormente, se ha implementado básicamente la visualización del progreso de subida de imágenes y el porcentaje. Lo que queda es el ui, según la personalización personalizada para lograr su demanda perfecta...

Resumen

Lo mencionado anteriormente es lo que el editor les ha presentado sobre cómo implementar la barra de progreso de subida de imágenes utilizando axios, espero que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y el editor les responderá a tiempo. También agradezco mucho el apoyo de todos a la página web de tutorial de gritos!

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado artificialmente y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione la evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.