iview实现多文件上传，前段到后台

Posted 2021-02-06 zhangyangtao

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

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;
　　}

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