Vue項目中使用axios和element ui實現文件上傳時的進度顯示
html代碼如下:
<div v-if="progressSeen">
<el-progress
:text-inside="true"
:stroke-width="15"
:percentage="progress"
status="success"
></el-progress>
</div>
js代碼如下:
export default {
data() {
return {
progress: 0,
progressSeen: false,
}
},
methods: {
submitForm(formName) {
//顯示進度
this.progressSeen = true;
var params = new FormData();
params.append(xxx, xxx);
var config = {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress: progressEvent => {
var complete =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
this.progress = complete;
}
};
var url = this.$store.state.baseUrl + "/video/upload/";
//緩存this指針
var self = this;
this.axios
.post(url, params, config)
.then(function(response) {
//...
})
.catch(function(error) {
self.$message.error(error);
});
}
}
}
}