vue获取上传进度_vue项目上传文件以及进度条(示例代码)

var fd = newFormData();

fd.append(‘image‘, that.$refs.upload.files[0]);

fd.append(‘filename‘, that.formData.images);

fd.append("system_type", that.formData.systemTypeVal);

fd.append("name", that.formData.imagesName);

fd.append("description", that.formData.description);

fd.append("system_vision", that.formData.systemVersion);

fd.append("disk_format", that.formData.format);

that.Axios({

method:‘post‘,

url: that.prefix+ ‘/yr_images/create_image/‘,

data: fd,

headers: {‘Content-Type‘: ‘multipart/form-data‘},

onUploadProgress(progressEvent){if(progressEvent.lengthComputable) {

let val= (progressEvent.loaded / progressEvent.total * 100).toFixed(0);

that.formData.showProgress= true;

that.formData.startValue=parseInt(val)

}

}

})

.then(function(response) {if (response.data.status == 1) {if (that.formData.startValue == 100) {

util.notification(‘success‘, ‘成功‘, response.data.success_msg);

that.getData(1);

}

}else{

util.notification(‘error‘, ‘错误‘, response.data.error_msg);

}

that.modal.formVisible= false;

})

.catch(function(error) {

that.modal.loading= false;

that.modal.formVisible= false;

console.log(error);

})