技术栈
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}
/>