elementui读取文件-ElementUI el-upload 断点后继续上传文件

从文档和所有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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 elementui elementui读取文件-ElementUI el-upload 断点后继续上传文件 https://www.wkzy.net/game/184281.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务