【AntDesign】文件自定义上传组件

技术栈

AntDesign 版本 ： 3x

效果图如下
官网示例给的是标准上传模式, 此处用的是自定义上传模式(customRequest)

ps : 此处是文件上传, 和图片上传实际共用的都是antd Upload组件, 图片上传组件传送门 : https://blog.csdn.net/qq_45481971/article/details/130576408?spm=1001.2014.3001.5501
( 代码大致相同, 代码详解这里就不写了, 可以参考图片上传组件详解~ )

代码

子组件代码 ↓

import React, { useState, useImperativeHandle } from 'react'
import { Button, Upload, Icon, message } from 'antd'
import PropTypes from 'prop-types'
import { uploadFunc, uploadSmallFunc } from '../../common/uploadFunc'

const UploadCom = (props, ref) => {
  const { dataList, disabled, acceptType, type, handleMediaResource } = props
  const [fileList, setFileList] = useState(dataList)
  useImperativeHandle(ref, () => ({ clearUploadList }))
  const clearUploadList = () => {
    setFileList([])
  }
  // 自定义上传逻辑
  const customRequest = async options => {
    const { file } = options
    let suffixs = []
    let usage = ''
    suffixs = ['pdf']
    usage = 'pdf'

      uploadSmallFunc(file, suffixs, usage)
        .then(res => {
          console.log(res, '上传成功返回的数据2')
          const newFileList = [
            ...fileList,
            {
              uid: file.uid,
              name: file.name,
              status: 'done',
              url: res.path,
              lastModified: file.lastModified,
              lastModifiedDate: file.lastModifiedDate,
              originFileObj: file,
              percent: 100,
              type: file.type,
            },
          ]
          setFileList(newFileList)

          if (newFileList.length > 0) {
            handleMediaResource({ type, fileList: newFileList })
          }
        })
        .catch(err => {
          const newFileList = [
            ...fileList,
            {
              uid: file.uid,
              name: file.name,
              status: 'error',
              url: file.path,
              lastModified: file.lastModified,
              lastModifiedDate: file.lastModifiedDate,
              originFileObj: file,
              percent: 100,
              type: file.type,
            },
          ]
          setFileList(newFileList)
        }) 
  }

  const showUploadList = { showRemoveIcon: disabled ? false : true }

  const props2 = {
    accept: acceptType,
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`)
      }
    },
    onRemove: file => {
      const index = fileList.indexOf(file)
      const newFileList = fileList.slice()
      newFileList.splice(index, 1)
      handleMediaResource({ type, fileList: newFileList })
      setFileList(newFileList)
    },
    defaultFileList: [],
    beforeUpload: file => {
      // 限制文件大小 小于20m
      const isFile20M = file.size / 1024 / 1024 > 20
      if (isFile20M) {
        message.error('文件大小超出20M限制，请修改后重新上传')
        return false
      }
    },
  }

  return (
    <div>
      <Upload
        {...props2}
        showUploadList={showUploadList}
        fileList={fileList}
        customRequest={customRequest}
      >
        <Button size="large" style={{ width: '150px' }} disabled={disabled}>
          <Icon style={{ fontSize: '18px' }} type="upload" />
          点击上传
        </Button>
      </Upload>
    </div>
  )
}
export default React.forwardRef(UploadCom)

父组件(部分)代码 ↓

  // 通过ref向子组件传递事件
  const uploadComRef= React.createRef(null)

  // 提交时清除图片组件数据
  const onSubmitFn = e => {
  	uploadComRef.current.clearUploadList()
  }
  
  // 上传组件
	<UploadCom
	   ref={uploadComRef}
       type="resourcePdf"
       acceptType=".pdf"
       dataList={pdfDataList}
       disabled={editType == 'view' ? true : false}
       handleMediaResource={handleMediaResource}
    />