vue 上傳附件和下載附件

一、上傳附件

使用input框和formData實現上傳

html部分：

<input type="file" @change="addFile($event)"
       multiple="multiplt" accept=".xls, .xlsx.docx, .doc, .pdf, .png, .jpg" />

js 部分：校驗上傳格式和文件大小

addFile(event) {
      var _this = this;
      var file = event.target.files;
      let len = file.length;
      let size = file[0].size;
      if (size > 5 * 1024 * 1024) {
        this.$message("請選擇5MB以內的附件！");
        return false;
      }else{
        for (var i = 0; i < file.length; i++) {
          // 上傳類型判斷
          var fileName = file[i].name;
          var idx = fileName.lastIndexOf(".");
          if (idx != -1) {
            var ext = fileName.substr(idx + 1).toUpperCase();
            ext = ext.toLowerCase();
            if (
              ext != "pdf" &&
              ext != "doc" &&
              ext != "docx" &&
              ext != "xls" &&
              ext != "xlsx" &&
              ext != "png" &&
              ext != "jpg"
            ) {
             this.$message( "只支持png、jpg、word、excel、pdf格式");
              return;
            } else {
              this.fileList.push(file[i]);
            }
          }
        }
      }
    },

數據傳輸到后台

　　可以通過formData.append()添加其他參數

//附件提交
      if (this.fileList.length > 0) {
        let formData=new FormData();
        this.fileList.forEach(file=> {
          formData.append('file', file);
        })
        formData.append("param", "{}");
        this.httpRequest(url, formData)
        .then(response => {
          if (response.success == true && !response.errorDes) {
               //do something
          } else {
               //do something
          }
        })
        .catch(error => {
        }),
      } 

二、附件下載

　　1、如果后台返回的是可以瀏覽器直接下載的url，前端使用a標簽就可直接下載

　　2、如果后台返回的是文件流，通過blob先轉換

　　　　具體：

//responseType: 'arraybuffer': 這樣返回的文件流才會是二進制的，才能使用new Blob得到正確的文件
 this.$axios.post(url, param, {
    headers: {
        'token':  gettoken("token")
      },
      responseType: 'arraybuffer'
    })
        .then(result => {
              var content = result.data;//文件內容
              var blob = new Blob([content]);
              var a = document.getElementByTageName('a')[0];
              a.download = "name";//文件名稱
              a.href = URL.createObjectURL(blob);
              a.click();
              a.remove();
        })