el-upload组件上传文件时,每传一个文件会调一次接口,所以当上传多个文件的时候,有 n 个文件就要调 n 次接口。
刚好之前工作中遇到使用el-upload组件批量上传文件的需求,来看看怎么实现。
思路:
1.取消组件的自动上传,使用自定义上传
2.组件开启多选文件
3.使用formData上传
html代码如下:
html
<el-upload
multiple
action="#"
:http-request="handleHttpRequest"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:requestUrl="requestUrl"
:show-file-list="true"
class="upload-file-uploader"
ref="fileUpload"
>
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
</template>
的文件
</div>
</el-upload>
<el-button size="mini" type="primary" @click="submitUpload">上传</el-button>
data数据定义:
javascript
data() {
return {
limit: 50;
uploadList: [],
baseUrl: process.env.VUE_APP_BASE_API,
fileList: [],
fileData: [],
};
},
methods定义方法:
javascript
methods: {
// 覆盖默认的上传行为
handleHttpRequest(obj) {
this.fileData.push(obj.file);
},
submitUpload() {
let formData = new FormData();
for (let i = 0; i < this.fileData.length; i++) {
formData.append("file", this.fileData[i]);
}
uploadFileResource(formData).then((res) => {
if (res.code == "200") {
this.$message.success("上传成功");
this.uploadList = res.data.map((item)=>{
return { name: item.fileName, url: item.url };
})
this.uploadList = [];
this.$modal.closeLoading();
} else {
this.$message.error("上传失败");
}
});
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split(".");
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
this.$modal.msgError(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
return true;
},
}
接口定义:
javascript
// 上传文件
export function uploadFileResource(data) {
return request({
url: '/common/uploadFileResource',
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // 这句很重要,以formData的方式上传
data
})
}
上传效果图: