React 文件流实现文件下载与文件导入

公司要做一个小小的功能，实现点击导出按钮，可以下载相关的接口文档；点击导入可以把刚导出的文档实现接口导入。但是由于后端返回的是一个文件流，所以我在写前端代码的时候出现以下的坑，特此记录：

1.在传入后端所需要的对应参数之后，控制台显示如下页面

因此问后端说是返回的一个文件流：百度查找解决方式

第一步：在接口处添加 responseType: 'blob'，如下图所示

第二步：利用百度写的方法: 

 export const downLoadDataQuery = (res:any) =>{
    const url =  window.URL.createObjectURL(new Blob([res],{ type:'application/zip;application/octet-stream'}));
    // const filename = res.headers['content-disposition'].split('=')[1];
    // const resetFileName = decodeURIComponent(filename);
    // console.log(resetFileName,"名字")
    const link = document.createElement('a');
    link.style.display = "none";
    link.href = url;
    let downName = "exportApi.zip";
    link.download = downName;
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(link.href);
    document.body.removeChild(link)
}

然后页面出现了如下效果

正常情况下，到此应该就结束了。但是我这边代码写上了拦截，因此出现文件是下载下载了，但是压缩包无法打开。因此出现了有一个坑： 

因为dispatch 这个在service层和model层进行了处理，导致结果没有处理过来。因此直接把data返回回来就可以打开了。至此完美解决。

 

文件导入

 上传 Upload - Ant Design

一开始文件出现上传失败，经过查看代码

 

是提交到antd所提供的外网地址，所以有可能上传不成功，但是我要做的仅仅是获取到此时的文件对象，然后传给后端，因此我把action注释掉 ，果然不会再出现上传不成功的效果，但是我依然要提交给后端一个文件对象，经过百度查询，找到合适的处理方法：

 一定要找到文件对象传给后端，至此完美解决。