Antd中Upload组件封装及使用:

1.Upload上传组件功能:

•   文件校验 :

        文件格式校验/文件大小校验/上传文件总个数校验

•   相关功能 :

         拖拽功能/上传到远程(七牛)/文件删除及下载

2.组件效果展示:

3.疑难点及解决方案:

  Promise.all多文件并行上传到远程(七牛云):

 (1)在beforeUpload钩子函数中获取token

 (2)循环fileList文件列表,使用fetch将所有文件上传到七牛,并将结果包装成Promise return出去

 (3)待所有文件上传成功后,通过Promise.all获取并存储结果,并通过useEffect及时将七牛返回的结果添加到fileList文件列表中。

 (4)注:由于一次上传多个文件时,beforeUpload钩子函数会执行多次,需要使用debounce进行防抖。

const [promiseAllResult, setPromiseAllResult] = useState<UploadFile[]>([]);const beforeUpload: UploadProps["beforeUpload"] = (file, fileList) => {debouncedBeforeUpload(fileList);return false;
};const debouncedBeforeUpload = debounce(async fileList => {...const res = await getQiniuTokenApi();const uploadPromises = fileList.map(async (file: any) => {return new Promise((resolve, reject) => {const formData = new FormData();formData.append("file", file);formData.append("token", res.data?.upToken || "");fetch("https://upload.qiniup.com/", {method: "POST",body: formData}).then(response => {if (response.status === 200) {return response.json().then(data => {// 返回包含文件信息和响应数据的对象resolve({uid: file.uid,url: "https://" + res.data?.domain + "/" + data.key + "?attname=" + file.name,filePreviewUrl: "https://" + res.data?.domain + "/" + data.key});}).catch(() => {reject(new Error("Upload failed"));});} else {reject(new Error("Upload failed"));}}).catch(error => reject(error));});});Promise.all(uploadPromises).then(res => {setPromiseAllResult(res);message.success("文件上传成功");}).catch(() => message.error("文件上传失败"));
});useEffect(() => {if (promiseAllResult && promiseAllResult.length > 0 && fileList && fileList.length > 0) {fileList.forEach(item => {const findResult = promiseAllResult.find(file => file.uid === item.uid);if (findResult) {// @ts-ignoreitem.filePreviewUrl = findResult.filePreviewUrl;item.url = findResult.url;}});}
}, [promiseAllResult]);

4.完整代码:

• 封装文件上传组件:

      src/component/Upload/index.tsx:

import { forwardRef, useImperativeHandle, useState, useEffect } from "react";
import { Upload, message } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import type { UploadFile, UploadProps } from "antd";
import { getQiniuTokenApi } from "@/api/modules/assetManagement";
import { debounce } from "lodash";
const { Dragger } = Upload;
interface UploadComType {maxCount?: number;accept?: string[];size?: number;multiple?: boolean;
}
const UploadCom = forwardRef(({maxCount = 3,accept = [".doc",".docx",".xml","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/pdf","image/png","image/jpeg"],size = 2,multiple = true}: UploadComType,ref: any) => {const [fileList, setFileList] = useState<UploadFile[]>([]);const [promiseAllResult, setPromiseAllResult] = useState<UploadFile[]>([]);useEffect(() => {if (promiseAllResult && promiseAllResult.length > 0 && fileList && fileList.length > 0) {fileList.forEach(item => {const findResult = promiseAllResult.find(file => file.uid === item.uid);if (findResult) {// @ts-ignoreitem.filePreviewUrl = findResult.filePreviewUrl;item.url = findResult.url;}});}}, [promiseAllResult]);useImperativeHandle(ref, () => ({getFileList: () => {return fileList;},parentSetList: (list: UploadFile[]) => {setFileList(list);}}));const onRemove = (file: UploadFile) => {const list = fileList.filter(item => item.uid !== file.uid);setFileList(list);};const beforeUpload: UploadProps["beforeUpload"] = (file, fileList) => {debouncedBeforeUpload(fileList);return false;};const debouncedBeforeUpload = debounce(async fileList => {let newFileList = fileList.filter((file: any) => {// 上传中的文件不进行校验if (file.status === "uploading") return true;// 校验文件类型const isFileTypeValid = accept.includes(file.type || "");if (!isFileTypeValid) {message.error(`${file.name} 不是允许的文件类型`);return false;}// 校验文件大小const isFileSizeValid = (file.size || 0) <= size * 1024 * 1024;if (!isFileSizeValid) {message.error(`${file.name} 超过最大文件大小限制 (${size}MB)`);return false;}return true;});if (newFileList.length === 0) {message.warning("没有符合要求的文件可上传");return false;}const res = await getQiniuTokenApi();const uploadPromises = newFileList.map(async (file: any) => {return new Promise((resolve, reject) => {const formData = new FormData();formData.append("file", file);formData.append("token", res.data?.upToken || "");fetch("https://upload.qiniup.com/", {method: "POST",body: formData}).then(response => {if (response.status === 200) {return response.json().then(data => {// 返回包含文件信息和响应数据的对象resolve({name: file.name,size: file.size,uid: file.uid,type: file.type,status: file.status,url: "https://" + res.data?.domain + "/" + data.key + "?attname=" + file.name,filePreviewUrl: "https://" + res.data?.domain + "/" + data.key});}).catch(() => {reject(new Error("Upload failed"));});} else {reject(new Error("Upload failed"));}}).catch(error => reject(error));});});Promise.all(uploadPromises).then(res => {setPromiseAllResult(res);message.success("文件上传成功");}).catch(() => message.error("文件上传失败"));});const handleChange: UploadProps["onChange"] = ({ fileList }) => {let newFileList = fileList;if (newFileList.length > maxCount) {message.warning(`最多可上传${maxCount}个文件`);newFileList = newFileList.slice(-maxCount);}setFileList(newFileList);};const uploadProps: UploadProps = {name: "file",onRemove,beforeUpload: beforeUpload,multiple: multiple,onChange: handleChange,accept: accept.join(",")};return (<div><Dragger {...uploadProps} fileList={fileList}><p className="ant-upload-drag-icon"><InboxOutlined /></p><p className="ant-upload-text">Click or drag file to this area to upload</p><p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.</p></Dragger></div>);}
);
export default UploadCom;

• 使用文件上传组件:

import UploadCom from "@/components/Upload/index";const uploadComRef = useRef<any>(null);<UploadCom ref={uploadComRef} />//获取组件中的文件
const file = uploadComRef.current?.getFileList();//给组件中的文件赋初始值
uploadComRef.current?.parentSetList(files);