Element UI upload 自定义上传进度

背景

最近测试了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"

操作如下：

el-upload的属性

上传文件的传入是uploadSectionFile。

增加param参数

我们需要监控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方法，把文件进度条设置成完成状态。

成功的回调

成功钩子的逻辑

至此，自定义上传进度完成。

下图是前端发送文件的状态

上传中

下图是接受到文件上传成功的状态

上传完毕