import { Form, Upload, message } from 'antd';import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';import type { ColProps } from 'antd';import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';import React, { useState, useEffect } from 'react';import { getCover } from '@/utils/index';interface UpLoadProps { isEdit?: boolean; extra?: string; fileList: UploadFile[]; changeFileList: (newFileList: UploadFile[]) => void; multiple?: boolean; maxCount?: number; action?: string; label?: string; type?: string; // img 图片 video 视频 data?: { [key: string]: string }; beforeUploadImg?: (file: RcFile) => boolean; beforeUploadVideo?: (file: RcFile) => boolean; labelCol?: ColProps; wrapperCol?: ColProps; required?: boolean;}const UpLoad: React.FC<UpLoadProps> = (props) => { const { isEdit = true, extra, fileList, changeFileList, multiple = true, maxCount = 5, action = '/api/oms/upload', data = { type: 4 }, label = '门店图片', type = 'img', beforeUploadImg, beforeUploadVideo, labelCol = { span: '8' }, wrapperCol = { span: '14' }, required = false } = props; // 门店数据 const [loading, setLoading] = useState(false); const beforeUpload = (file: RcFile, fileList: RcFile[]) => { let beforeUploadCallBack = beforeUpload1 if (type == 'img') { if (beforeUploadImg && typeof beforeUploadImg == 'function') { beforeUploadCallBack = beforeUploadImg } } else if (type == 'video') { if (beforeUploadVideo && typeof beforeUploadVideo == 'function') { beforeUploadCallBack = beforeUploadVideo } else { beforeUploadCallBack = beforeUpload2 } } return beforeUploadCallBack(file) } const beforeUpload1 = (file: RcFile) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'; if (!isJpgOrPng) { message.error('请上传JPG或者PNG或者GIF格式文件!'); } const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) { message.error('图片大小不超过5MB!'); } return isJpgOrPng && isLt2M; }; const beforeUpload2 = (file: RcFile) => { const isJpgOrPng = file.type === 'video/mp4'; if (!isJpgOrPng) { message.error('请上传MP4格式文件!'); } const isLt2M = file.size / 1024 / 1024 < 20; if (!isLt2M) { message.error('视频大小不超过20MB!'); } return isJpgOrPng && isLt2M; }; const handleChange: UploadProps['onChange'] = ({ file, fileList: newFileList }) => { console.log(file, newFileList, 'newFileList11111111') setLoading(true) if (file.status) { changeFileList(newFileList) } else { // 检验没通过的从列表删除 changeFileList(newFileList?.filter(item => item?.uid !== file?.uid)) setLoading(false) } if (newFileList?.length >= maxCount) { setLoading(false) } if (file.status == 'done') { changeFileList(newFileList?.map(item => ({ ...item, url: file?.uid == item.uid ? file?.response?.data?.url : item.url, thumbUrl: type == 'video' ? getCover(file?.uid == item.uid ? file?.response?.data?.url : item.url) : '' }))) setLoading(false) } if (file.status == 'removed') { changeFileList(newFileList?.filter(item => (file?.uid != item.uid))) setLoading(false) } }; const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>上传</div> </div> ); useEffect(() => { }, []) return ( <Form.Item label={label} extra={isEdit ? extra : ''} labelCol={labelCol} wrapperCol={wrapperCol} > <Upload name="file" listType="picture-card" className="avatar-uploader" showUploadList={{ showRemoveIcon: isEdit, }} multiple={multiple} maxCount={maxCount} beforeUpload={beforeUpload} fileList={fileList} action={action} onChange={handleChange} onRemove={(...arg) => { console.log(arg, 'arg') }} data={data} headers={{ authorization: window.parent.sessionStorage.getItem("token") }} > {(isEdit && (fileList?.length < maxCount)) ? uploadButton : ''} </Upload> </Form.Item> );};export default UpLoad;
