vue elementUI 如何处理文件批量上传
问题:elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件;但是在处理的时候还是一个一个传上去。目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒解决:this.$refs.upload.uploadFiles 该属性可以获取上传的文件相关信息,包括上传后后端返回的responsehtmlel-uploadref='up...
·
问题: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 }?`);
}
更多推荐
已为社区贡献3条内容
所有评论(0)