用vue+el-upload+new FormData()实现多图片上传
如图
<div class="relicsImage_content"><el-uploadclass="upload_reilcimg"ref="uploadImg":action="baseurl + '/antique/batch_img'"list-type="picture-card":headers="headers":before-upload="beforeAvatarUploadMore":on-success="handleAvatarSuccess":on-remove="handleRemove":on-change="changeUpload":show-file-list="true"accept="image/png, image/jpeg, application/pdf":multiple="true":auto-upload="false"><i class="el-icon-plus" /></el-upload><p style="font-size: 12px; color: #ccc; margin-top: 20px">可上传pdf、jpg、jpeg、png格式，不能超过50M</p></div><div><el-button type="primary" @click="uploadSumit()">确定</el-button><el-button @click="reset()">重置</el-button></div>
data() {return {ssd: [],isActive: false,forma: {copyReportCode: "",},list: [],page: 1,limit: 5, //total: 0,id: "", //代表选中某一行的idmultipleSelection: [],uploadMoreimg: {fileList: [],},url: this.baseurl + "/antique_levy/upload",headers: {Authorization: sessionStorage.getItem("token"),},};},created() {},methods: {reset() {this.$refs.uploadImg.clearFiles();},uploadSumit() {// 创建新的数据对象let formData = new FormData();// 将上传的文件放到数据对象中this.uploadMoreimg.fileList.forEach((file) => {formData.append("file", file.raw);});console.log("提交前", formData.getAll("file"));// 自定义上传this.axios.post("/antique/batch_img", formData).then((response) => {console.log(response);this.isshowMoreimg = false;// if(response.code == 200){// this.$refs.uploadImg.clearFiles();// this.msgSuccess('上传成功！');// }else{// this.$message.error(response.msg);// }}).catch((error) => {this.$message.error("上传失败！");});},openDialog(employeeId) {this.isshowMoreimg = true;},downLoad(row) {this.downloadByA({url: this.baseurl + "/collection_copy_report/print?id=" + row.id,name: "藏品编目",});},downloadByA({ url, name = "temp" }) {// 生成一个a元素const a = document.createElement("a");// 创建一个单击事件const event = new MouseEvent("click");// 设置图片名称a.download = name;// 如果跳转页面，则在其他页面跳转a.target = "_blank";// 将生成的URL设置为a.href属性a.href = url;// 触发a的单击事件a.dispatchEvent(event);},// 上传之前beforeAvatarUploadMore(file) {const isJPG = file.type === "image/jpeg";const isPng = file.type === "image/png";const isPdf = file.type === "application/pdf";// const isLt50M = file.size / 1024 / 1024 < 50;// if (!isLt50M) {//this.$message.warning("上传文件大小不能超过 50MB!");//return false;// }// if (!isJPG && !isPng && !isPdf) {//this.$message.warning("只能上传 JPG/PNG/PDF/JPEG 格式!");//return false;// }},// 上传成功handleAvatarSuccess() {},// 删除handleRemove(file, fileList) {this.uploadMoreimg.fileList = fileList;},// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用changeUpload(file, fileList) {this.uploadMoreimg.fileList = fileList;},},
