react导出、导入文件

导出文件：

if (res) {
      let binaryData = [];
      binaryData.push(res);
      let blobUrl = '';
        blobUrl = res;
      // let blobUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application / zip' }));
      console.log(blobUrl);
      const eleLink = document.createElement('a');
      eleLink.style.display = 'none';
      let filename = new Date().getTime() + '.xls';
      eleLink.href = blobUrl;
      eleLink.download = filename;
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
      window.URL.revokeObjectURL(blobUrl);

      message.success('导出成功');
    } else {
      message.error('导出失败');
    }

导入-01

HTML:

<span>
  <Button onClick={this.onOpenFileChooser}>导入计划</Button>
  <input
    type="file"
    accept="png"
    className="hide"
    style={{ display: 'none' }}
    ref={(node) => (fileNode = node)}
    onChange={this.onBackgroundImageChanged}
  />
</span>

Function:

 // 导入
  onOpenFileChooser = () => {
    if (!!fileNode) fileNode.click();
  };
  onBackgroundImageChanged = async (event) => {
    event.stopPropagation();
    let res;
    const file = event.currentTarget.files[0];
    const fileName = file.name;
    console.log('fileName', fileName);
    event.currentTarget.value = '';
    //验证是否登入
    const userInfo = umbrella.getLocalStorage('user');
    if (!userInfo || !userInfo.appId || !userInfo.appKey) {
      message.warn('请先登录');
      window.location.href = '/';
      return;
    }
    //
    const config = {
      headers: { 'Content-Type': 'multipart/form-data' },
    };
    const param = new FormData();
    if (!file) {
      message.warn('请先选择文件');
      return;
    }
    param.append('file', file, fileName);
    
    res = await MaintainPlanImport(param, config);
    if (res?.statusCode === 200) {
      message.success('上传成功');
      return;
    }
  };

导入-02

import { Button, Upload, message } from 'antd';
import { Import} from '../../../../axios; //导入接口
import React, { useContext, useEffect, useRef, useState } from 'react';
const UploadFile = () => {
  const dataRef = useRef({
    upData: false,
  });
  
  const uploadFile = {
    beforeUpload: (file, fileList) => {
      if (dataRef.current.upData) {
        message.warn('请勿同时上传!');
        return false;
      }
      message.loading({ content: '开始上传文件！', key: 'updatable', duration: 0 });
      dataRef.current.upData = true;
      const config = { headers: { 'Content-Type': 'multipart/form-data' } };
      const param = new FormData();
      param.append('formFile', file, file.name);
      Import(param, config)
        .then((res) => {
          console.log('上传文件', res);
          if (res?.statusCode !== 200) {
            return Promise.reject(res);
          }
          store.triggerRefresh();
          dataRef.current.upData = false;
          message.success({ content: '上传文件成功', key: 'updatable', duration: 2 });
        })
        .catch((e) => {
          console.error(e);
          dataRef.current.upData = false;
          message.error({ content: '上传文件出错！', key: 'updatable', duration: 2 });
        });
      return false;
    },
    showUploadList: false,
    maxCount: 1,
  };
return (
	<Upload {...uploadFile}>
     	<Button type="primary" ghost>
         导入
    	 </Button>
	</Upload>
	)
};

export default UploadFile;

---