当前位置：首页 > news >正文

elementui组件el-upload实现批量文件上传

news 2025/7/9 1:28:53

el-upload组件上传文件时，每传一个文件会调一次接口，所以当上传多个文件的时候，有 n 个文件就要调 n 次接口。

刚好之前工作中遇到使用el-upload组件批量上传文件的需求，来看看怎么实现。

思路：

1.取消组件的自动上传，使用自定义上传

2.组件开启多选文件

3.使用formData上传

html代码如下：

<el-uploadmultipleaction="#":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数据定义：

data() {return {limit: 50;uploadList: [],baseUrl: process.env.VUE_APP_BASE_API,fileList: [],fileData: [],};},

methods定义方法：

  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;},
}

接口定义：

// 上传文件
export function uploadFileResource(data) {return request({url: '/common/uploadFileResource',method: 'post',headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // 这句很重要，以formData的方式上传data})
}

上传效果图：