el-upload
组件在使用自动上传多文件模式时,会多次请求接口,为了避免多次请求,改为在同一个请求中同时上传多个文件,代码如下,通过dom数量判断何时应该上传
<template>
<el-upload
class="upload-file"
action=""
multiple
ref="uploadRef"
:accept="acceptList"
:http-request="uploadFile"
:file-list="fileList"
:show-file-list="true"
:auto-upload="true"
:on-change="handleFileChange"
v-loading="fileLoading"
>
<el-button
size="small"
icon="el-icon-upload2"
:loading="fileLoading"
type="primary"
>
批量上传
</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileLoading: false,
fileList: [],
acceptList: '.doc,.docx,.pdf,.jpg,.jpeg,.png',
}
},
methods: {
handleFileChange(file, fileList) {
this.fileList = fileList
},
// 文件上传
uploadFile(file) {
// 避免多次请求 获取上传文件的长度 与 fileList的长度相等时才请求
this.$nextTick(() => {
let uploadlist = document.querySelectorAll(
'.upload-file .el-upload-list.el-upload-list--text .el-upload-list__item'
)
let maxLen = uploadlist.length // 上传文件数量
let limit = 15 // 限制上传文件数量
// 判断当前文件是否是最后一个文件
if (this.fileList.length === maxLen) {
// 上传文件数量大于限制数量
if (maxLen > limit) {
this.$message({
type: 'warning',
message: `最多上传${limit}个文件`,
})
this.$set(this, 'fileList', [])
this.$refs.uploadRef.clearFiles()
return
}
this.fileLoading = true
const formData = new FormData()
for (let i = 0; i < this.fileList.length; i++) {
let raw = this.fileList[i].raw
formData.append('fileList', raw)
}
// 清空文件列表
this.$set(this, 'fileList', [])
// 格式错误提示
if (errorFlag) {
this.$message({
type: 'warning',
message: `文件格式不正确,请使用${this.acceptList}格式文件`,
})
this.$refs.uploadRef.clearFiles()
this.fileLoading = false
return
}
batchAddApi(formData)
.then(({ code, message, data }) => {
if (code === '200') {
this.$message.success('上传成功')
} else {
this.$message.error('上传失败')
}
})
.catch(err => {
this.$message.error('上传失败')
console.error('err:', err)
})
.finally(() => {
// 上传成功后清空文件列表
this.$refs.uploadRef.clearFiles()
this.fileLoading = false
})
}
})
},
},
}
</script>
网友评论