vue 中实现文件下载和上传（excel文件）

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