formData上传多文件，并用Blob将数据生成文件。

前端上传多个文件解析文件数据后将数据一起返回，用Blob前端生成文件

项目需求：文件合并，上传多个文件，解析后返回数据，在前端生成文件。

HTML：

	<ul>
       <li class="input-title" :class="index==0?'font-weight-900':''">{{item.title}}</li>
       <li>
         <div class="input-parent">
           <input @change="showUploadChange(index)" ref="uploadInput" class="hidden-input" :multiple="index == 0?true:false" type="file">
           <input ref="showUploadInput" v-model="item.show_input_value" class="show-input" type="text">
         </div>
         <span @click="uploadSubmit(index,item.url)" class="download-btn">确定</span>
       </li>
    </ul>

上传多个文件主要是依靠input的 multiple 属性，将multiple设置为true就可以上传多文件。

JS：

	 uploadSubmit(index,url){
	 	//refs获取文件
        let file = this.$refs.uploadInput[index].files
        let formData = new FormData();
        let _this = this;
        if(this.data_list[index].show_input_value!==""){
        for(let i=0;i<file.length;i++){
        //将要提交的文件放到formData中
              formData.append("file",file[i]);
          }
        let settings = {
          url: this.baseUrl + url,
          method: "POST",
          processData: false,//这里要改成false，否则会出错。
          mimeType: "multipart/form-data",
          contentType: false,//这里要改成false，否则会出错。
          data: formData
        };


        $.ajax(settings).done(function(response) {
          let res = JSON.parse(response);
          if(res.code == 1){
            let data = res.data;
            //创建Blob
            let url = window.URL.createObjectURL(new Blob([data]))
            // 创建a标签
            let a = document.createElement('a')
            //修改下载文件的名称
            a.download =res.name + "." + res.type;
            a.style.display = 'none'
            a.href = url
            document.body.appendChild(a)
            a.click();
            a.remove();
          }else{
            alert(res.msg);
          }

        });
      }else{
        alert("请选择文件！")
      }
      },

Java：

	 @RequestMapping("/url")
    public JSONObject mergedDocument(HttpServletResponse response, HttpServletRequest request, @RequestParam("file") MultipartFile[] file){
        JSONObject result = new JSONObject();
        String str = "";//保存文件数据
        String name = "";//文件名称
        String type = "";//文件类型（TXT，SQL，Excel）
        try {
            for(MultipartFile f:file){
            
                Map<String,String> map = analysisSqlRepository.resultCode(f);//这里用来判断文件编码格式，防止出现乱码，有需要的可以看我的另一篇博文。
                name = f.getOriginalFilename().split("\\.")[0];
                type = f.getOriginalFilename().split("\\.")[1];

                String code = map.get("encoding");
                //输入流
                InputStream in = f.getInputStream();
                BufferedReader reader = null;

                if(code != null){
                    reader = new BufferedReader(new InputStreamReader(in,code));
                }else{
                    reader = new BufferedReader(new InputStreamReader(in,"UTF-8"));
                }
                String line;
				//按行读取文件数据
                while ((line = reader.readLine()) != null){
                    str += line +"\r\n";
                }
                //关闭输入流
                in.close();

            }
            //返回数据
            result.put("code","1");
            result.put("data",str);
            result.put("name",name);
            result.put("type",type);
            result.put("msg","sucess!");
        }catch (Exception e){
            result.put("msg", "失败");
            if (e instanceof MyException) {
                result.put("msg", e.getMessage());
            }
            result.put("code", 0);
        }

        return result;
    }

敲完收工。