附件上传组件
附件上传组件在工作中经常遇到,自己封装设计了一个,大致功能如下:
1、支持多文件上传
2、支持文件数量、大小、格式限制
3、具备自定义上传功能,灵活性高
注意事项:
1、文件格式限制的时候,注意文件名中带.的情况,处理文件名取后缀的时候需要注意
2、自定义上传函数的编写要做异常捕捉,防止系统异常报一些奇怪的错误
3、有时候还涉及到文件服务器上文件删除的操作,可在onRemove函数内操作
index.tsx:
import { FC, useState, useRef } from "react";
import { UploadOutlined } from "@ant-design/icons";
import { Button, Upload, message } from "antd";
import { RcFile } from "antd/lib/upload";
interface FileUploadBean {
arcCate?: string;
accept: String[];
onGetArcNumChange?: (arcNum: string) => void;
}
const FilesUpload: FC<FileUploadBean> = ({
arcCate = "doc",
accept,
onGetArcNumChange,
onChange,
value,
}) => {
const verify = {
length: 10,
accept: accept
? accept
: [
"pdf",
"png",
"jpe",
"jpg",
"jpeg",
"doc",
"docx",
"xls",
"xlsx",
"ppt",
"pot",
"pptx",
"csv",
"rar",
"zip",
"7z",
],
size: 20,
};
const [fileList, setFileList] = useState<any>([]);
const [fileDetailList, setFileDetailList] = useState<any>([]);
const arcNumRef = useRef<string>("");
const fileRef = useRef<any>();
const changeValue = (arr: object[]) => {
setFileDetailList(arr);
onChange(arr);
};
const handelChange = (info: any) => {
if (info.file.status) {
setFileList([...info.fileList]);
// 删除文件
if (info.file.status === "removed") {
const list = Array.from(fileDetailList, (item: any) =>
item?.minioId !== info.file?.response?.[0]?.ID ? item : null
).filter((fileList) => fileList);
changeValue([...list]);
}
}
};
// 上传文件前做一些数量、、大小、文件格式类的校验
const beforeUpload = (file: RcFile, list: RcFile[]) => {
const { length, size, accept = [] } = verify || {};
fileRef.current = file;
// 文件个数
const fileListLength = fileList ? fileList.length : 0;
const listLength = list.length;
if (length && fileListLength + listLength > length) {
message.error(`附件列表中文件数量不得超过${length}个,请确定附件清单。`);
return false;
}
// 大小限制
if (size && file.size / 1024 / 1024 > size) {
message.error(`附件列表中文件大小不得超过${size}MB,请重新选择。`);
return false;
}
// 文件格式校验
if (accept && accept.length > 0) {
// 此处注意文件名中带.的情况
const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
if (!suffix || !accept.includes(suffix.toLowerCase())) {
message.error(`文件格式异常,只允许上传PDF格式文件,请重新选择。`);
return false;
}
}
return true;
};
// 自定义上传
const UploadFilesAction = async (options: any) => {};
// 文件删除
const onRemove = (even: any) => {};
return (
<Upload
fileList={fileList}
onChange={handelChange}
beforeUpload={beforeUpload}
customRequest={UploadFilesAction}
onRemove={onRemove}
>
<Button icon={<UploadOutlined />}>上传附件</Button>
单个文件20M以内,文件数量10个以内
</Upload>
);
};
export default FilesUpload;