需要了解，new FormData() --上传时，将内容转为文件流

                 new FileReader()--base64压缩，目前不了解

一、excel文件导出

     三种导出: 一种是纯粹前端导出；两种后端导出: 分为 后端给地址导出，还有就是文件流的形式导出，最好是后端导出，不会卡 ，前端导出数据量一大 很卡

    Blod：blob是存放二进制大对象的容器,包括large object ；创建一个bold对象

    后端返回二进制数据流，生成Excel ： 

    ① 点击模板获取--导出，弹框进行确认，点击确认

    ② 调接口，获取结果，接口的reaponseType: ' blob'

    ③ 调用window的url方法，创建a标签，点击a = url, 设置点击下载

  -- 导出文件为 pdf 时，修改 type: 'application/pdf;chartset=UTF-8' 

  // 模板获取

  const getTemplate = async () => {
    const res = await getStuTemplate()
    // const blob = new Blob(['\ufeff' + res], { type: 'application/vnd.ms-excel' })

    // 调用window的url方法
    const url = window.URL.createObjectURL(res)

    // 通过创建a标签实现
    const link = document.createElement('a')
    link.href = url

    // 命名
    // link.download = res?.headers['content-disposition'].split(';')[1].split('=')[1] || '模板'
    link.download = decodeURI('考生信息')
    document.body.appendChild(link)

    // 下载文件
    link.click()

    // 释放内存 
    document.body.removeChild(link)
  }

// 考生信息--导出excel模板
export async function getStuTemplate(params?: any) {
  return request(`/${Proxy_Api}/entrantManage/exportExcel`, {
    method: 'GET',
    responseType: 'blob',
    params,
  })
}

// 导出 -- PDF
  const getTemplate = async () => {
    const res = await getStuTemplate({ code })
     // 创建blob对象，解析流数据
    const blob = new Blob([res], { type: 'application/pdf;chartset=UTF-8'})
    // 调用window的url方法，根据解析后的blob对象创建URL 对象
    const url = window.URL.createObjectURL(blob)
    // 通过创建a标签实现
    const link = document.createElement('a')
    link.href = url
    // 命名
    // link.download = res?.headers['content-disposition'].split(';')[1].split('=')[1] || '模板'
      link.download = decodeURI('请假统计')
      document.body.appendChild(link)
      // 下载文件
      link.click()
      // 释放内存 
      document.body.removeChild(link)
  }

二、excel文件 导入--上传

   ① 用Dragger组件进行上传，点击上传后，选取文件

   ② 设置组件的props，用beforeUpload钩子函数拦截文件，不设置action地址，取消自动上传

   ③ 通过beforeUpload，拦截默认上传，对上传文件进行处理，可以判断文件格式

   ④ 点击modal弹框的确认后，创建new FormData()，使用append,发送fetch请求，返回数据需要转化为json格式

① 设置组件

<Modal destroyOnClose={true} title="数据导入" visible={isUploadOpen} onOk={handleOkUpload} onCancel={handleCancelUpload} width={550}>
        <Dragger {...props} style={{ marginBottom: 20, marginTop: 20 }}>
          <p className="ant-upload-drag-icon"><InboxOutlined /></p>
          <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
          <p className="ant-upload-hint">当前仅支持扩展名：.xls/.xlsx</p>
        </Dragger>
        <p style={{ fontSize: 12, color: '#00000073', marginTop: 10 }}>注：若在此之前已经上传过数据而此次上传存在覆盖操作，则相关分组信息需要重新导入</p>
      </Modal>

// dragger组件

② 设置组件props

// 设置文件变量
 const [oneFile, setOneFile] = useState<any>();
 const props: UploadProps = {
    maxCount: 1, //最大数量
    multiple: false,  //是否支持多选
    onRemove: (file) => {  //删除
      setOneFile(null)
    },

    // beforeUpload 拦截默认上传，回调参数就是file文件
    // 可以对文件类型进行判断
    beforeUpload: (file) => {
      const fileName = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)
      const fileType = fileName == 'xls' || fileName == 'xlsx'
      if (!fileType) {
        message.error('上传失败，请上传xls/xlsx格式的文件')
      } else {
        setOneFile(file)
      }
      return false;
    },
  };

③ 上传文件

/**点击上传 */
  const handleOkUpload = () => {

    const formData = new FormData();
   
    formData.append('file', oneFile as RcFile);

    fetch(`${Proxy_Api}/entrantManage/importExcel/${code}`, {
      method: 'POST',
      body: formData,
    })
      .then((res) => {
        return res.json()
      })
      .then((res) => {
        if (res?.success) {
          message.success('导入成功');
          setOneFile(null)
          setIsUploadOpen(false)
        } else {
          message.error(res.desc)
        }
      })
      .catch(() => {
        message.error('导入失败');
      })
  };

三、照片上传

        ① 上传props，不设置action,设置beforeUpload，拦截上传文件

        ② 对上传文件进行判断，格式，大小，每次上传前，修改变量  oneFile ,用于最后提交

        ③ 设置props的 onChange，改变上传文件时，调用base64方法，修改imageUrl变量，用于在页面显示当前上传图片

        ④ 提交，new FormData 来转为文件流，使用append,发送fetch请求，返回数据需要转化为json格式

① 设置组件

const [imageUrl, setImageUrl] = useState<any>();

 <Form.Item label="考点图片" name="photo">

    <Upload  {...props} >

        {imageUrl ? 

        // 上传图片后，图片反显，图片+上传按钮

        [<img src={imageUrl} alt="avatar" style={{ height: '60px', marginRight: 10 }} />, <Button icon={<UploadOutlined />}>上传文件</Button>] 

        : <Button icon={<UploadOutlined />}>上传文件</Button>}</Upload>

 </Form.Item>

② 设置上传props

// 上传的props
const props: UploadProps = {
    maxCount: 1,
    multiple: false,
    name: "avatar",
    action: "#",
    listType: "picture",
    className: "avatar-uploader",
    showUploadList: false,
    onRemove: (file) => {
      setOneFile(null)
    },

    /**上传文件之前的钩子，参数为上传的文件,可设置文件格式和大小，若返回false停止上传 */
    beforeUpload: beforeUpload,
    onChange: handleChange,
  };

③ 提交上传文件

const [oneFile, setOneFile] = useState<any>(); //文件变量
/**上传文件之前的钩子，参数为上传的文件,可设置文件格式和大小，若返回false停止上传 */
  const beforeUpload = (file: RcFile) => {
    
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('请上传 JPG/PNG 格式的图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片需要小于 2MB!');
    }
    setOneFile(file)
    return isJpgOrPng && isLt2M;
    // 返回false ,不请求，但是获取不到显示图片，用action:"#",替换不请求
    // return false;
  };

  ④ base64设置反显图片

  // 上传判断，是否显示图片
  const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    // 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
    reader.readAsDataURL(img);
  };

  ⑤ onChange--上传文件改变时的回调 */

  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {

    if (info.file.status === 'uploading') {
      return;
    }

    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj as RcFile, (url) => {
        setImageUrl(url);
      });
    }
  };

⑥ 提交

/**新增、修改--确认 */
  const handleOk = () => {
    addForm.validateFields().then(async (values) => {
        if (imageUrl) {
          const { address, examYear, code, name } = values

          let newForm = new FormData()

          newForm.append("address", address);
          newForm.append("examYear", examYear);
          newForm.append('code', code);
          newForm.append('name', name);
          newForm.append('photo', oneFile);

            fetch(`${Proxy_Api}/examPlaceManage`, {
              method: 'POST',
              body: newForm,
            })
              .then((res) => {
                return res.json()
              })
              .then((res) => {
                if (res?.success) {
                  message.success('新增成功');
                  setOneFile(null)
                  setIsModalOpen(false);
                } else {
                  const { desc } = res
                  message.error(desc);
                }
              })
              .catch(() => {
                message.error('新增失败');
              })