前段 業務是 分別上傳兩個文件? ： 1.一個報告 一個 表格，而且限制了格式 報告為doc 表格為xsl 2.有別的參數 也要，比如，上傳人，上傳日期，中心名稱? 這樣的話，我們無法使用 iview 的直接上傳，必須自定義上傳，手動上傳 <Col span="24"> xxx報告 <Upload multiple ref="upload" :before-upload="handleUpload" :show-upload-list="false" :action="http"> <Button type="ghost" style="width:200px" icon="ios-cloud-upload-outline">上傳doc,文件大小規定20兆</Button> </Upload> <div><ul class="file-list" v-for="(list,index) in file" :key="index"> <li>文件名: <span style="font-size:15px;">{{ list.name }}</span> <Icon type="ios-close" size="20" style="float:right;" @click="delFileList(index)"></Icon> </li> </ul> </div> </Col> <Col span="24"> xxx表格 <Upload multiple ref="upload" :before-upload="handleUpload1" :action="http1"> <Button type="ghost" style="width:200px" icon="ios-cloud-upload-outline">上傳xsl,文件大小規定20兆</Button> </Upload> <div> <ul class="file-list" v-for="(list,index) in file1" :key="index"> <li>文件名:<span style="font-size:15px;">{{ list.name }}</span> <Icon type="ios-close" size="20" style="float:right;" @click="delFileList1(index)"></Icon> </li> </ul> </div> </Col> <Button type="primary" @click="upload">提交</Button> http :"" http1:"" 生命變量啥的不說了，主要說下方法 //上傳之前調用 return false 停止自動上傳改為手動上傳 handleUpload(file) { var fileType = file.name.split("."); fileType = fileType[fileType.length - 1].toLowerCase(); if (fileType != "doc" && fileType != "docx") { this.$Message.error("文件格式不正確，只能上傳.doc .docx 類型的文件"); return; } //20971520 if (file.size > 20971520) { this.$Message.error("最大上傳20兆的文件"); return; } if (this.file.length > 0) { this.$Message.info("最多只能上傳1個文件"); } else { this.file.push(file); } return false; }, handleUpload1(file) { var fileType = file.name.split("."); fileType = fileType[fileType.length - 1].toLowerCase(); if (fileType != "xlsx" && fileType != "xls") { this.$Message.error("文件格式不正確，只能上傳.xlsx .xls 類型的文件"); return; } //20971520 if (file.size > 20971520) { this.$Message.error("最大上傳20兆的文件"); return; } if (this.file1.length > 0) { this.$Message.info("最多只能上傳1個文件"); } else { this.file1.push(file); } return false; }, delFileList(index) { this.file.splice(index, 1); }, delFileList1(index) { this.file1.splice(index, 1); }, //上傳 upload() { //其他條件判斷 if (this.formItem.shengbh == "") { this.$Message.error("請刷新頁面"); return; } if (this.formItem.shibh == "") { this.$Message.error("中心名稱不能為空"); return; } if (this.formItem.vsj == "") { this.$Message.error("評價日期不能為空"); return; } var jsonStr = JSON.stringify(this.data); //創建 formData 對象：很重要 let formData = new FormData(); //向 formData 對象中添加文件 //多個文件上傳 formData.append("uploadFileBg", this.file[0]); // 文件對象1：報告 formData.append("uploadFileYd", this.file1[0]);?// 文件對象2：表格 formData.append("id", this.formItem.id);//其他參數 formData.append("shimc", this.formItem.shimc); formData.append("shibh", this.formItem.shibh); formData.append("shengbh", this.formItem.shengbh); formData.append("shengmc", this.formItem.shengmc); formData.append("pjsj", this.formItem.pjsj); formData.append("pjry", this.formItem.pjry); formData.append("sts", this.formItem.sts); formData.append("pjdf", this.formItem.pjdf); formData.append("pjyj", this.formItem.pjyj); formData.append("gjjy", this.formItem.gjjy); formData.append("jsonStr", jsonStr); //使用post方式上傳 this.$http.post("/api/zjcdjscpj/doSave", formData).then(res => { if (res.retHead.code == "0000000") { this.$Message.success("添加成功"); this.formItem = []; this.init(); this.file = []; this.file1 = []; } else { this.$Message.error("添加失敗"); } }); }, 注意：一旦出現問題 關于請求頭的 有可能是你設置請求攔截問題 在mian.js 里面 // 添加請求攔截器 axios.interceptors.request.use( config => { var qs = require('qs'); //上傳文件，不對config.data進行處理 if (config.url == "/api/zjcdjscpj/doSave") { }else if(config.url == "/api/zjctbjdscpj/doSave"){ } else if(config.url == "/api/zjctbjdscpj/redactJdscpj"){ } else { config.data = qs.stringify(config.data); } let token = localStorage.getItem("token") if (token) { config.headers['OGJJ-AuthToken'] = token } return config; }, error => { return Promise.reject(error); }); // 添加響應攔截器 axios.interceptors.response.use( response => { if (response.data.retHead.code == '0101005' || response.data.retHead.code == '0101006' || response.data.retHead.code == '0101007' || response.data.retHead.code == '0101008' || response.data.retHead.code == '0101009') {//token失效 window.location.href = '/#/login'//需求方要求一旦出錯立即跳轉登錄，所以采取這種侵入式的手段。 } else { return response.data } }, error => { return Promise.reject(error); }); 后臺接受：

/**
* 保存登記雙查
*/
@RequestMapping(value = "/doSave")
@ResponseBody
public RetData<String> doSave(HttpServletRequest request,Zjcdjscpj vo) throws Exception {
　　　　MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
　　　　String msg = "添加成功";
　　　　// 獲得文件
　　　　MultipartFile multipartFile = multipartRequest.getFile("uploadFileBg");// 與前端設置的fileDataName屬性值一致
　　　　MultipartFile multipartFile1 = multipartRequest.getFile("uploadFileYd");// 與前端設置的fileDataName屬性值一致
　　　　RetData<String> retData = new RetData<String>();
　　　　retData.setRetBody(msg);
　　　　return retData;
　　}

總之：從前端到后臺，實現上傳，歡迎咨詢

轉載于:https://www.cnblogs.com/zhangyangtao/p/10329197.html

總結

以上是生活随笔為你收集整理的iview实现多文件上传，前段到后台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。