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

上传文件

<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：限制个数

对文件大小进行限制

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

删除文件：

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

下载文件

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