前情背景：要求用ant design pro 框架做导入导出功能，然后开始绞尽脑汁，前前后后折磨了我几个星期。
导出json文件
问题背景：我当时脑子一片浆糊，完全不知道用这个框架咋下手，然后就先收集资料，看看别人完成的导出功能是怎样完成的。一开始我想的是导出json格式的文件，但是我收集到的资料，大部分成功的只是导出excel文件(虽然之前我有成功导出过text文件，但是因为这次的文件内容不适合用所以没有用text)。所以我一开始尝试的是导出excel格式的文件，虽然很艰辛的成功了，但很麻烦，就是代码很长却设置格式和读取内容，后来就换成json格式。json格式文件，可以运用序列化和反序列化。
// 导出文件
const exportJson = (name: string, data: TableListItem) => {
let element = document.createElement('a');
let content = JSON.stringify(data);//序列化data
//写入文件
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
element.setAttribute('download', name);
element.style.display = 'none';
element.click();
}
name为文件名，download是下载保存到此电脑的下载路径下。可以直接在onclick事件或者其他事件直接调用exportJson函数，只要传两个参数（文件名和需要导出的数据）
上传json文件
我的上传文件不是上传到服务器，服务器既不读取也不保存文件，我的上传文件是web端读取文件内容，然后将进行一系列操作后的数据传给服务器。使用的是ant design pro里的upload组件
官网api地址：https://ant.design/components/upload-cn/#components-upload-demo-basic
<Upload {...importprops} >
<Button icon={<UploadOutlined />}>上传</Button>
</Upload>
不用上传到服务器的各种问题
上传文件报 403 Forbidden错误
问题描述：使用upload组件，可以正常进行点击按钮，选择文件，点击确定流程，但就是上传失败，导致无法读取内容。
解决方法：请求头增加token
问题原因:因为请求头没有加这个csrf token ，所以服务器会拒绝我们的所有请求。只要加上headers就好
不上传服务器进行的操作
参考文件：https://www.cnblogs.com/zzalmo/p/12094763.html
1、阻止文件默认上传，beforeUpload函数
const importprops = {
name: 'file',
accept: ".json",
headers: { 'x-csrf-token': Cookies.get('csrfToken') as string },
showUploadList: false,
async beforeUpload(info:any){
await exportData(info);//这里的info就是原生文件数据，不用进行任何转化操作
return false;//false则取消上传行为
}
};
beforeUpload是进行上传行为前被调用的，如果不想有上传行为，则return false，如果有上传行为，则beforeUpload函数还可以作为上传前的统一检查和检测，用来规范格式，限制大小，文件格式，文件个数等等，如果没有达到要求就取消上传行为，如果达到则上传文件到action的上传地址去。
上传文件到服务器，各种报错原因
404 错误
问题原因：因为这个是要上传文件到服务器才会报的错，我当时不知道upload组件是默认有上传服务器行为的，所以一直有这个报错。404的原因是找不到接口，也就是你在importprops里没有加action，或者加的上传地址是错误的，再仔细排查一下。
读不到文件内容
问题描述：可以正常进入到onchange函数的done状态，但就是不能进行下去。
参考该文档：https://blog.csdn.net/Joie_Z/article/details/114090929
问题原因：因为传的info是upload进行封装后的数据，不是原生文件数据，所以就一直读不到内容，读文件操作，是要对原生文件进行的。所以将原生文件数据传入即可
await exportData(info.file.originFileObj);
//info为upload封装后的数据
//info.file.originFileObj则为原生文件数据