vue element文件批量上传-ui 上传文件组件怎么使用

emmm我又来了?乛?乛?

饿了么上传組件的文件列表filelist有个删除功能我看源代码它是直接删除,并不会提示issue上也有不少开发者提过这个问题,开发组还是建议自己写(想偷懶都不行……)
除了复写文件列表外还加了一个上传状态的显示。


插播一则tips:在项目中文件是直接上传到阿里云上传参数data会动态变化。但是由于自动上传一直出错(上传参数data有些关键字不存在)后来用手动上传却是可行。所以测试了半天才采用以下方式:


加个上传加載的过程el-progress组件恰好适用

原本是用this.progress控制status,但是后来发现及时上传进度100%也不一定上传成功所以改用this.pass。用饿了么的上传地址偶尔会跨域报错上传多几次又成了=。=

需求:我司要求实现多文件上传且要求使用formData传递参数。

// 导入文件时将文件存入数组中

5. 实现后的截图如下:


  

如果有问题可以联系我哦:微信:lmqq密码已经找不到所以只能放上微信了。

 由于el-upload一次只能上传一个文件如果要上传大量文件就要同时发送大量的http请求,这样会增加服务端的负担但如果一次批量上传大量文件,服务端要很久之后才能收到请求所以我做了一个分批批量的上传,示例中一次上传10个文件上传完成后发送下一个上传请求,再上传10个这样就解决了一次发送大量http请求或一次批量上传大量文件后端和久才能收到请求的问题。文章最后附有github链接链接中有示例工程,可直接运行

 // 监听窗口关闭事件,当窗口关闭时主动去关闭websocket连接,防止连接还没断开就关闭窗口server端会抛异常。
 // 上传文件按钮被点击后显示上传文件的提示框

我要回帖

更多关于 element文件批量上传 的文章

 

随机推荐