How to use axios to upload pictures with a progress bar function
Axios is a promise-based HTTP library that can be used in browsers and node.js. This article mainly introduces the use of axios to implement the progress bar of uploading images. Friends who need it can refer to it
Axios is a promise-based HTTP library that can be used in browsers and node.js.
Features
Create XMLHttpRequests from the browser
Create http requests from node.js
Support Promise API
Interception of requests and responses
Convert request data and response data
Cancel request
Automatically convert JSON data
Client supports defense against XSRF
Let me introduce to you how to use axios to implement the progress bar function of uploading pictures. The specific content is as follows:
In a recent project, a The mobile page needs to upload dozens of pictures at most. Although the pictures are compressed, they are still very large in the end. If the network card is used, the upload time is very poor. If it keeps loading, the user will not know how much he has uploaded. In order to display the upload progress more intuitively, it is best to display the progress bar and the upload percentage;
The project uses the vuejs framework, mint-ui as the UI framework; the request is axios officially recommended by vue (Really powerful); Axios officially introduces the use of native upload processing progress events (refer to here for details, here is the Chinese axios official introduction):
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},Because vuejs is used, for data requests from the interface, Convenient management requires unified management. If placed in each component, it will be inconvenient for future maintenance and management; in the reqwest.js file, an uploadPhoto method is defined. This method has three parameters, namely parameters and two callback functions. The parameters are what we want to upload. The required parameters of the image; the first callback function is to obtain the data contained in the upload progress, and the second callback is to obtain the data returned by the background if the upload is successful or failed; to perform the next step of the page operation.
uploadPhoto(payload,callback1,callback2){
axios({
url:BASE_URL + '/handler/material/upload',
method:'post',
onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
if(progressEvent.lengthComputable){
//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
//如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
callback1(progressEvent);
}
},
data:payload
}).then(res =>{
callback2(res.data);
}).then(error =>{
console.log(error)
})
}Use the Progress component in the mint-ui component, and define the variable in the component in the data method. The variable is of type number. When defining, pay attention;
<mt-progress :value="precent" :bar-height="10">
<p slot="end">{{Math.ceil(precent)}}%</p>
</mt-progress>Import the reqwest.js file, get the uploadPhoto method, and use the $nextTick attribute to update the page in real time based on the upload progress.
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('图片上传成功').then(action => {
console.log('ok');
});
}
})According to the above method, the upload progress and percentage display of the image are basically realized. The rest is the UI, which can be customized according to your own personality to achieve your perfect needs...
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement random layout waterfall flow in ionic3
How to use Redux in React projects (detailed tutorial)
How to realize automatic numerical increase in JavaScript
How to use Swiper to realize the use of paginator
How to use Bus in Vue component communication
How to implement sensitive text prompts in Angular
How to implement hidden display in Angular
The above is the detailed content of How to use axios to upload pictures with a progress bar function. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if 'Uncaught (in promise) Error: Request failed with status code 500' occurs when using axios in a Vue application?
Jun 24, 2023 pm 05:33 PM
It is very common to use axios in Vue applications. axios is a Promise-based HTTP client that can be used in browsers and Node.js. During the development process, the error message "Uncaught(inpromise)Error: Requestfailedwithstatuscode500" sometimes appears. For developers, this error message may be difficult to understand and solve. This article will explore this
Choice of data request in Vue: Axios or Fetch?
Jul 17, 2023 pm 06:30 PM
Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.
What should I do if 'TypeError: Failed to fetch' occurs when using axios in a Vue application?
Jun 24, 2023 pm 11:03 PM
Recently, during the development of Vue applications, I encountered a common problem: "TypeError: Failedtofetch" error message. This problem occurs when using axios to make HTTP requests and the backend server does not respond to the request correctly. This error message usually indicates that the request cannot reach the server, possibly due to network reasons or the server not responding. What should we do after this error message appears? Here are some workarounds: Check your network connection due to
How to solve the problem of 'Error: Network Error' when using axios in Vue application?
Jun 25, 2023 am 08:27 AM
How to solve the problem of "Error: NetworkError" when using axios in Vue application? In the development of Vue applications, we often use axios to make API requests or obtain data, but sometimes we encounter "Error: NetworkError" in axios requests. What should we do in this case? First of all, you need to understand what "Error:NetworkError" means. It usually means that the network connection
Efficiently utilize Vue and Axios to implement batch processing of front-end data
Jul 17, 2023 pm 10:43 PM
Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.
How to use vue3+ts+axios+pinia to achieve senseless refresh
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia realizes senseless refresh 1. First download aiXos and pinianpmipinia in the project--savenpminstallaxios--save2. Encapsulate axios request-----Download js-cookienpmiJS-cookie-s//Introduce aixosimporttype{AxiosRequestConfig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
What is the parameter passing specification for Java axios and spring front-end and back-end separation?
May 03, 2023 pm 09:55 PM
1. The axios parameter transfer method corresponding to the @RequestParam annotation takes the following Springjava code as an example. The interface uses the POST protocol, and the parameters that need to be accepted are tsCode, indexCols, and table. For this Spring HTTP interface, how should axios pass parameters? How many methods are there? Let’s introduce them one by one. @PostMapping("/line")publicList
What should I do if 'Error: timeout of xxxms exceeded' occurs when using axios in a Vue application?
Jun 24, 2023 pm 03:27 PM
What should I do if "Error: timeoutofxxxmsexceeded" occurs when using axios in a Vue application? With the rapid development of the Internet, front-end technology is constantly updated and iterated. As an excellent front-end framework, Vue has been welcomed by everyone in recent years. In Vue applications, we often need to use axios to make network requests, but sometimes the error "Error: timeoutofxxxmsexceeded" occurs.
