vue elementUI 处理文件批量上传方式
作者：伊人笑桃花酒
这篇文章主要介绍了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)
})
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。