element UI文件上传、下载，限制文件大小、格式

上传文件

<el-upload
  class="upload-demo"
  action="上传地址"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
 :data="listData"
 accept=".doc, .docx, .xls, .xlsx, .csv"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

limit：限制上传个数

multiple：是否支持多选文件data：上传时需要携带的参数，如果是多个参数，则以对象的形式写在一个变量中，如：

listData：{

filename：‘’，

id：

}

具体属性可以在官网查看：

Element - The world's most popular Vue UI framework

如果需要对文件大小进行限制则需要绑定上传文件之前的钩子：before-upload

 // 上传文件之前
    beforeUpload(file) {
      this.formData.fileName = file.name
      let size10M = file.size / 1024 / 1024 < 30
      if (!size10M) {
        this.$message.warning('上传文件大小不能超过 30MB!');
        return false
      }
    },

accept：限制文件格式

删除文件：

  handleRemove(file, fileList) {
      // 删除文件成功
      let data = file.response.data   // 删除的文件
      this.FileVoList = this.FileVoList.filter(item => item !== data);   // 将此次删除的文件从我们保存的列表中删除掉
    },

上传成功保存到我们自定义的变量列表中：

 // 上传成功
    handlePreview(file) {
      this.FileVoList.push(file.data)
    },

上传文件达到限制：

 // 达到限制
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },

下载文件

 <a :href="filePath" download target="_blank">
          <span>文件名</span>
          <span>点击下载</span>
        </a>

文件流下载

// 封装接口
 export async function downloadFile(url: any, data: any, method: any = 'get') {
  return new Promise((resolve, reject) => {
    request({
      url,
      method,
      headers: {
        'Content-Type': 'application/json',
      },
      // responseType: 'blob',
      responseType: 'arraybuffer',
      ...data,
    })
      .then((res) => {
          //成功
          resolve(res);
      })
      .catch((res) => {
        //失败
        reject(res);
      });
  });
}

调用接口：

export const downLoadApi= (data: any) => {
  return downloadFile('url', { data }, 'post');
};

downLoadApi(data) .then((res: any) => {
        const filestream = res.data; // 返回的文件流

        let fileName = res.headers['content-disposition']; //文件名存储地址
        if (fileName) {
          const reg: any = /filename=(.*)/;
          fileName = decodeURI(reg.exec(fileName)[1].trim());
        }

        const blob = new Blob([filestream], {
          type: 'application/vnd.ms-excel',
        });
        const a = document.createElement('a');
        const href = window.URL.createObjectURL(blob); // 创建下载连接
        a.href = href;
        a.download = fileName || '';

        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a); // 下载完移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      })
      .catch((e) => {
        message.warning(e.message);
      });