文件上传el-upload，使用自定义：http-request，默认不显示进度条
最近在项目中使用elementUI的上传文件，使用custom:http-request时默认不显示进度条。事实上，这个问题有两种解决方案。一种是直接在action中写入上传路径的url，然后在on-success中获取返回值的路径（保存在服务器中，会返回url的路径地址）；另一种方法是自定义进度条，即在：http-request点击上传
data(){return{progressPercent:0,//进度条默认为0}}methods:{/***自定义上传图片的方法*/uploadSectionFile(params){//上传新文件时，设置进度条值为0this.progressPercent=0constfile=params.filethis.ruleForm.packageSize=(file.size/(1024*1024)).toFixed(2)+'M'//文件大小，转换为Mthis.forms=newFormData()//实例化一个formData用于文件上传this.forms.append('file',file)//单独上传图片并返回路径//进度条constuploadProgressEvent=progressEvent=>{this.progressPercent=Math.floor((progressEvent.loaded*100)/progressEvent.total)}uploadFile(this.forms,uploadProgressEvent).then(res=>{if(res.code===200){this.ruleForm.packageUrl=res.data.packageUrlthis.$refs.uploadElement.clearValidate()//如果如果文件上传成功，需要的验证会被动态去掉}}).catch(response=>{console.log('文件上传失败')})},}最重要的是这个constuploadProgressEvent=progressEvent=>{this.progressPercent=Math.floor((progressEvent.loaded*100)/progressEvent.total)}然后在界面中，传参给exportfunctionuploadFile(obj,onUploadProgress){returnrequest({url:'uploadpath',method:'POST',data:obj,headers:{'Content-Type':'multipart/form-data'},onUploadProgress})}
