最近的项目涉及到的文件导入与导出比较多，整理一下，之前也写过vue文件的上传，那篇更详细一点。

文件导出

导出的时候，后端基本上会给一个数据流，请求里必须需要加上responseType: 'blob'用来接收数据流。然后可以选择使用file-saver插件直接下载导出，很方便

import { saveAs } from 'file-saver';
//调用导出接口
if (res) {
   saveAs(res, '文件名');
}

也可以使用老办法下载


      const url = URL.createObjectURL(res);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);

关于下载的文件名的获取，可以自己命名，也可以从请求头Content-Disposition中取，这个要和后端配合好。如果自己命名的话，记得加上文件的后缀名定义文件类型。

这样文件的下载就完成了，浏览器会直接跳转下载。

如果通过文件的url下载，用<a>标签或者用window.open直接打开

文件上传

文件的上传我们基本都用upload组件，element和antd的上传组件都是类似的。

后端在这里可能会要求直接上传文件数据流，也有可能要求我们自己上传到服务器，获取到文件url之后再传给后端，这个在之前的文章中也写过。这次因为文件需要后端校验之后才能上传服务器，所以是传给后端二进制数据流的。

在上传时获取file调用上传接口，file是一个二进制文件流，用append添加到FormData对象中。FormData对象可以处理各种类型的数据，包括文本、文件、二进制数据等。使用他我们可以将不同类型的数据添加到表单中，并一起传输发送到服务器。


        <Upload
              {...props}
              beforeUpload={(file) => {
                handleUploadChange(file, record.bankId, index);
              }}
            >
              <Button type="link" style={{ color: '#3E8BF8' }} loading={btnLoading2[index]}>
                上传
              </Button>
            </Upload>
      
      //在handleUploadChange中写
      const formData = new FormData();
      formData.append('file', file);
      //调用上传接口

创建之后就可以传输formdata对象了，也可以根据接口需要去加新的参数。

文件的上传与导出

文件导出

文件上传