背景
最近测试了element ui前端框架,用到了upload组件,根据element UI官方文档里讲,我们直接指定action(上传文件的url),会直接把上传的文件封装成formdata,append(file,File),传给后端。
但是我的需求是把文件当做files的名字传入,并且要监控上传过程。因此需要自定义upload上传方法。
ps:建议上传多个文件的时候,一定要一个一个传文件,而不是一下传好多文件,因为有接口超时的问题,如果遇到电脑或者浏览器版本太低,导致传入的文件,都是object,element-ui的设计的也是一个一个传,即使你一下选择多个文件也是一个一个传。
需要监控文件上传进度,我们需要使用到这两个钩子on-progress,on-success.
而自定义upload方法,我们需要使用http-request覆盖默认的上传行为,可以自定义上传的实现。
整个需求来说,我们并没有监控具体上传了多少到服务器,而是监控前端是否把文件发送完了,发送完成了就是100%,但是进度还是进行中,如果返回成功了,证明已经上传成功了,那么就是完成状态。
代码
ps: 下载文件的工具需要加入config.headers['responseType'] = "blob";config.responseType= "blob"
操作如下:
上传文件的传入是uploadSectionFile。
我们需要监控upload进度,因此需要在uploadFile里面增加一个参数,也就是把当前上传的参数传递给方法。
需要在mutiUploadAttach里面加入监控操作,并调用on-process钩子
OnProgress就是在执行on-progress的钩子函数。
uploadFileProcess(event, file, fileList),记住如果操作这个file,是无效的,因为我们upload组件绑定的是fileList,因此需要找到fileList中对应的file去操作,是progressFlag=true,successFlag=false才有效。
到了这一步,我们就知道了,file发送的进度。
接下来就是接收完成的回调,因为发送完成,后端处理也需要一定时间,在没有返回成功之前也应该是on-progress. 所以progressFlag=true,successFlag=false。
如果文件上传完成了,就调用onSuccess方法,把文件进度条设置成完成状态。
至此,自定义上传进度完成。
下图是前端发送文件的状态
下图是接受到文件上传成功的状态