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