vue elementUI 处理文件批量上传方式
elementUI 如何处理文件批量上传
问题
elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件;但是在处理的时候还是一个一个传上去。
目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒
解决
this.$refs.upload.uploadFiles
该属性可以获取上传的文件相关信息,包括上传后后端返回的response
html
el-upload ref='upload' class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :on-success='upLoadSuccess' accept=".doc,.docx"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div> </el-upload>
方法处理
upLoadSuccess(response, file, fileList) { if (this.$refs.upload.uploadFiles) { let length = this.$refs.upload.uploadFiles.length this.UpLoadFilesLength ++ // 全局变量,用来计算upLoadSuccess方法调用次数 if (this.UpLoadFilesLength == length) { this.UpLoadAllFilesLength = 0 // 如果方法调用的次数和文件列表的长度相同,说明所有文件都上传完毕,将该全局变量置0 this.resErrorStr() // 该函数处理每个文件上传错误情况下response拼接 } } }, resErrorStr() { if (this.$refs.upload.uploadFiles) { // 如果存在这个值 let filesList = this.$refs.upload.uploadFiles.slice() let UpLoadAllErrorStr = '' // 错误信息拼接变量 for (let i = 0; i < filesList.length; i++) { if (filesList[i].response) { if (filesList[i].response.code != 200) { // 如果该文件上传后返回的状态值不是200,则说明该文件上传错误 UpLoadAllErrorStr += `${filesList[i].response.message}<br/>` } } } if (!UpLoadAllErrorStr) { this.$message({ type: 'success', message: '上传文件成功!' }); } else { this.$message({ type: 'error', dangerouslyUseHTMLString: true, message: UpLoadAllErrorStr }); } this.$refs.uploadAll.uploadFiles = [] // 调用完成之后将值置空,防止再次上传将上次结果也记录下来 } }, handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${ file.name }?`); }
elementUI 批量上传下载注意事项
批量手动上传文件,和表单数据一起提交
在el-upload组件关键的钩子,其它省略
multiple
:auto-upload = "false"
:file-list = "fileList"
:on-change = "selectFile"
(里面是把上传的fileList传给自定义的 this.fileList)
点击上传,将多个文件和表单数据一起上传
a.定义FormData,将表单数据和文件填充到FormData里面
b.自定义请求头部,Content-type:‘multipart/form-data’
let formData = new FormData() for(let key in data){ if(data[key]){ formData.append(key,data[key]) } } this.fileList.forEach((element,i) =>{ formData.append('fileList',element.raw) }) let rs = await axios({ method:'post', url: cfg.uploadURL + '/sp/addSp', data: formData, headers:{ 'Content-type':'multipart/form-data' } })
表格中上传文件中,组件钩子函数自带参数
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="(file,fileList)=>{ return beforeRemove(file,fileList,scope.$index) }" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> beforeRemove(file,fileList,index){ console.log(index) }
批量下载(后台不返回压缩包,前端就一个个下载了)
download(val){ let vals = val.split(',') //后台返回的文件标识符数组 vals.forEach((element) =>{ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.height = 0; iframe.src = cfg.baseURL+'下载路径'+element; document.body.appendChild(iframe); setTimeout(()=>{ iframe.remove(); }, 1000) }) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-tree-chart树形组件的实现(含鼠标右击事件)
Vue-Tree-Chart,一个Vue.js2组件,本文就详细的介绍一下vue-tree-chart树形组件的实现(含鼠标右击事件),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-02-02uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)
这篇文章主要介绍了uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
最新评论