官方的 Upload
组件从文档和所有demo来看,均是选中文件直接上传,但是业务系统有大文件上传的需求,所以要用这个组件封装一个断点续传的功能。
从官方给出的文档看到有个 http-request 覆盖默认的上传行为,可以自定义上传的实现
似乎能满足要求,那就开撸。
确定需求:最大支持2GB的任意文件上传,小于100M直接上传,大于100M的时候分块上传,并且要支持断点续传。
我拿了官方的一个demo
<el-upload
drag
multiple
:http-request="checkedFile"
action="/"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
可拖动上传,比较高大上一点。
http-request
方法定义之后,文件上传会先走这个方法,传入一个参数
options = {
headers: this.headers,
withCredentials: this.withCredentials,
file: rawFile,
data: this.data,
filename: this.name,
action: this.action,
onProgress: e => {
this.onProgress(e, rawFile);
},
onSuccess: res => {
this.onSuccess(res, rawFile);
delete this.reqs[uid];
},
onError: err => {
this.onError(err, rawFile);
delete this.reqs[uid];
}
}
该参数就是组件的参数集合,同时,如果定义了这个方法,组件的submit
方法就会被拦截掉(注意别在这个方法里面调用组件的submit
方法,会造成死循环),在这个方法里面我就可以搞我想搞的事情了。
说一下要注意的:
使用这个断点续传方法一定要先和服务端协调好,看他们怎么处理的,比如我这里就是按照文件分块后按照序号和文件id等信息跟服务端建立联系,服务端从接收到第一块文件的请求开始就会检测该文件是否已经存在已接收的文件块,然后再返回续传的块的序号,最终再调用接口校验文件完不完整。
如果使用mock
来模拟接口的话,onUploadProgress
是无效的,因为mock
会重新声明一个XMLHttpRequest
,不会继承onUploadProgress
。
以上,就是el-upload
组件的大文件分块上传的改造方案,目前还很粗糙,甚至还没过测试,如有问题会持续更新
20180726
看源码的时候发现http-request
这个传入的回