iview前端向后端传数据一直转圈_iview实现多文件上传，前段到后台

前段 业务是 分别上传两个文件  ：

1.一个报告 一个 表格，而且限制了格式 报告为doc 表格为xsl

2.有别的参数 也要，比如，上传人，上传日期，中心名称

这样的话，我们无法使用 iview 的直接上传，必须自定义上传，手动上传

xxx报告

上传doc,文件大小规定20兆

• 文件名:

  {{ list.name }}

xxx表格

上传xsl,文件大小规定20兆

• 文件名:{{ list.name }}

提交

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 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 retData = new RetData();

retData.setRetBody(msg);

return retData;

}

总之：从前端到后台，实现上传，欢迎咨询

原文：https://www.cnblogs.com/zhangyangtao/p/10329197.html