vueでファイルのダウンロードとアップロードを実現(excelファイル)

1.ファイルのダウンロード
方法1:パラメータなしのダウンロードに適し、限界がある

vue ：
template：
    

scripte：
 exportDoc() {
      let me = this;
      axios
        .post("/api/pageCont/downLoadModel")
        .then(function(res) {
            //         ，  iframe            
            let iframe = document.createElement('iframe')
            iframe.style.display = 'none'
            iframe.src = res.request.responseURL
            iframe.onload = function () {
            document.body.removeChild(iframe)
            }
            document.body.appendChild(iframe)
        })
        .catch(function(response) {
          console.log(response);
        });
    }

java ：
//     
    @RequestMapping(value = "downLoadModel")
    public void downLoadModel(HttpServletResponse response){
        HSSFWorkbook workbook = pageContService.downLoadModel();
        try {
            String fileName = new String("    .xls".getBytes("gbk"),"iso-8859-1");
            //  response
            response.reset();
            //  response Header
            response.addHeader("Content-Disposition", "attachment;filename="+fileName);
            OutputStream os = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/vnd.ms-excel;charset=utf8");
            // excel       
            workbook.write(os);
            os.flush();
            os.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

方法二:汎用方法

 handleExprot() {
      let me = this;
      let param = {
        column:this.checkedmenus,
        qianData:this.multipleSelection
      };
        axios({
        //       
          method:'post',
          url:'/api/pageCont/exportEsData',
        //      blob
          responseType:'blob',
          data:param
        })
        .then(function(res) {
             let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});  // res             
       //          
              let objectUrl = URL.createObjectURL(blob); 
              window.location.href = objectUrl;
        })
        .catch(function(response) {
          console.log(response);
        });

      console.log(this.checkedmenus,"  ",this.multipleSelection)
    },

 
2.ファイルアップロード

vue ：
template：
    

    
      
        
          
            
            

                     ， 
                  
            
            
    Excel  ，    500kb
          
        
      
      

           
           
      
    
script ：

//  excel  
    beforeUpload(file) {
      if (file.type == "" || file.type == null || file.type == undefined) {
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        if (
          FileExt == "xls" ||
          FileExt == "xlsx" ||
          FileExt == "XLS" ||
          FileExt == "XLSX"
        ) {
          return true;
        } else {
          this.$message.error("       Excel  !");
          return false;
        }
      }
      return true;
    },
    upModel(){
      this.uploading = false;
      this.file = [];
      this.uploadDialog = true;
    },
    //              
    handleExceed(files, fileList) {
      this.$message.warning(`       1    ，        `);
    },
    uploadFile(item) {
      this.file = item.file;
    },
    postFile() {
      const fileObj = this.file;
      var fileData = new FormData();
      fileData.append("file", fileObj);
      let headers = {
        "Content-Type": "multipart/form-data"
      };
      this.uploading = true;
      this.$ajax({
        method: "post",
        url:"http://localhost:6002/api/pageCont/importDateToEs",    //       
        headers: headers,
        data: fileData
      }).then(res => {
        console.log("res:",res);
        if (res == 200) {
          this.$message.success("    ");
          this.uploadDialog = false;
        } else {
          this.$message.error("  ！         ");
        }
      });
      setTimeout(function() {
        this.uploading = false;
      }, 1500);
    },
    colseFile() {
      this.uploadDialog = false;
    },

  }

Java  ：
//    es  
    @RequestMapping(value = "importDateToEs")
    public ReturnType importDateToEs(@RequestParam("file") MultipartFile file){
        ReturnType rt = pageContService.importDateToEs(file);
        return rt;
    }