Implementing image upload progress bar function using axios

Axios is a promise-based HTTP library that can be used in both browsers and node.js.

Features

Create XMLHttpRequests from the browser

Create HTTP requests from node.js

Support Promise API

Intercept requests and responses

Convert request and response data

Cancel the request

Automatically convert JSON data

Client-side support for XSRF defense

Below, I will introduce how to implement the upload image progress bar using axios, and the specific content is as follows:

　In the recent project, a mobile page may need to upload dozens of images at most. Although the photos have been compressed, they are still very large. If it is a network card, the upload time is very poor. If it is always loading, the user does not know how much has been uploaded. To more intuitively show the upload progress, it is best to display a progress bar and the upload percentage;

　　The project uses the Vue.js framework, mint-ui as a UI framework; it requests axios recommended by the Vue official (it is really powerful); the official axios introduces the use of nativeUpload progress event handling(For specific reference here, here is the official Chinese introduction of axios):

 onUploadProgress: function (progressEvent) {
  // Handling of the native progress event
 },

　　Since Vue.js is used, for the convenience of management for interface data requests, it is necessary to have unified management. If it is placed in each component, it is not convenient for future maintenance and management; an uploadPhoto method is defined in the reqwest.js file, which has three parameters, namely parameters, and two callback functions. The parameters are the additional parameters required for uploading the image; the first callback function is to obtain the data containing the upload progress, and the second callback is to obtain the success or failure of the upload, the data returned by the background to proceed with the next operation on the page.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //Native event for getting upload progress
        if(progressEvent.lengthComputable){
          //The attribute lengthComputable mainly indicates whether the total amount of work to be completed and the amount of work already completed can be measured
          //If lengthComputable is false, progressEvent.total and progressEvent.loaded cannot be obtained
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    }
  }

using mint-The Progress component in the ui component defines the variable precent in the data method of the component, which is of number type. Pay attention to the semicolon when defining it;　

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

Import the reqwest.js file, get the uploadPhoto method, and update the progress of the upload in real time on the page using the $nextTick property.

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('Image upload successful').then(action => {
     console.log('ok');
    });
  }
}

　　Based on the above method, the upload progress and percentage display of the image are basically realized. The remaining is the UI, which can be realized according to your personalized customization to meet your perfect needs...

Summary

The above is the introduction given by the editor to everyone on how to implement the upload image progress bar function using axios, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I would also like to express my sincere gratitude to everyone for their support of the Yelling Tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)