从文档和所有demo来看,官方的Upload组件是直接上传选中的文件,但是业务系统需要上传大文件,所以应该用这个组件来封装断点续传的功能。
从官方文档中听说有一个http-request会覆盖默认的上传行为,而自定义上传的实现似乎已经满足要求了,那么我们就开始吧。
确定需求:上传2GB以内任意文件,小于100M直接上传,大于100M分块上传,支持断点续传。
我拍了一个官方演示
将文件拖到此处,或点击上传
可以拖拽上传,比较高大上一点。
定义好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];
}
}
该参数是组件的参数集。 同时,如果定义了该技术elementui读取文件,则会拦截组件的submit方法(注意不要在该方法中调用组件的submit方法elementui读取文件,会造成死循环)。 通过这种方法,我可以做我想做的事情。
我们来谈谈应该注意什么:
要使用这种断点续传方法,必须首先与服务器协调,看看他们是如何处理的。 比如这里我根据文件分块后的序列号和文件id等信息与服务器建立连接。 对文件的请求首先会检查文件是否已经接收到块,然后返回要上传的块的序列号,最后调用套接字检查文件是否完整。
如果用mock来模拟socket,onUploadProgress是无效的,因为mock会重新声明一个XMLHttpRequest,不会继承onUploadProgress。
以上是el-upload组件分块上传大文件的改造方案。 它仍然很粗糙,甚至还没有经过测试。 如果有问题,会持续更新。
20180726