iview实现多文件上传，前段到后台
前段 业务是 分别上传两个文件 ：
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;
}
总之：从前端到后台，实现上传，欢迎咨询
