电商网站建设推荐,阿里低代码开发平台,wordpress dms,网站建设三亚el-upload组件上传文件时#xff0c;每传一个文件会调一次接口#xff0c;所以当上传多个文件的时候#xff0c;有 n 个文件就要调 n 次接口。
刚好之前工作中遇到使用el-upload组件批量上传文件的需求#xff0c;来看看怎么实现。
思路#xff1a;
1.取消组件的自动上…el-upload组件上传文件时每传一个文件会调一次接口所以当上传多个文件的时候有 n 个文件就要调 n 次接口。
刚好之前工作中遇到使用el-upload组件批量上传文件的需求来看看怎么实现。
思路
1.取消组件的自动上传使用自定义上传
2.组件开启多选文件
3.使用formData上传
html代码如下
el-uploadmultipleaction#:http-requesthandleHttpRequest:before-uploadhandleBeforeUpload:file-listfileList:limitlimit:requestUrlrequestUrl:show-file-listtrueclassupload-file-uploaderreffileUpload!-- 上传按钮 --el-button sizemini typeprimary选取文件/el-button!-- 上传提示 --div classel-upload__tip slottip v-ifshowTip请上传template v-iffileSize大小不超过 b stylecolor: #f56c6c{{ fileSize }}MB/b/templatetemplate v-iffileType格式为 b stylecolor: #f56c6c{{ fileType.join(/) }}/b/template的文件/div/el-uploadel-button sizemini typeprimary clicksubmitUpload上传/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})
}
上传效果图
