liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改文件类型上传校验

Browse Source
This commit is contained in:
linxd
2025-08-05 15:45:52 +08:00
parent e07e925c42
commit 23b0e5e801
3 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/FileUpload/FileUpload.tsx
View File

@ -50,7 +50,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
listType = 'text', listType = 'text',
buttonText, buttonText,
disabled = false, disabled = false,
accept = allowedTypes.map(type => `.${type}`).join(','), accept = allowedTypes.map((type) => `.${type}`).join(','),
showUploadList = true, showUploadList = true,
isDragger = false, isDragger = false,
tip, tip,
@ -62,7 +62,6 @@ const FileUpload: React.FC<FileUploadProps> = ({
// 监听value变化 // 监听value变化
useEffect(() => { useEffect(() => {
// 处理字符串URL值（这是关键修复） // 处理字符串URL值（这是关键修复）
if (typeof value === 'string' && value) { if (typeof value === 'string' && value) {
const file: Partial<UploadFile> = { const file: Partial<UploadFile> = {
@ -144,12 +143,12 @@ const FileUpload: React.FC<FileUploadProps> = ({
const filteredList = newFileList.filter((file) => file.status !== 'error'); const filteredList = newFileList.filter((file) => file.status !== 'error');
// 为每个文件添加正确的url // 为每个文件添加正确的url
const processedList = filteredList.map(file => { const processedList = filteredList.map((file) => {
if (file.status === 'done' && file.response && !file.url) { if (file.status === 'done' && file.response && !file.url) {
return { return {
...file, ...file,
url: getFileUrl(file), url: getFileUrl(file),
filePath: file?.response?.filePath || "filePath not found", filePath: file?.response?.filePath || 'filePath not found',
}; };
} }
return file; return file;
@ -163,7 +162,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
}; };
const beforeUpload = (file: File) => { const beforeUpload = (file: File) => {
return validateFileSize(file, maxSize); return validateFileSize(file, maxSize, allowedTypes);
}; };
const UploadComponent = isDragger ? Upload.Dragger : Upload; const UploadComponent = isDragger ? Upload.Dragger : Upload;
@ -204,7 +203,12 @@ const FileUpload: React.FC<FileUploadProps> = ({
} }
return ( return (
<Button type="link" style={{ padding: 0, height: 'auto',marginTop: 6 }} icon={<UploadOutlined />} disabled={disabled}> <Button
type="link"
style={{ padding: 0, height: 'auto', marginTop: 6 }}
icon={<UploadOutlined />}
disabled={disabled}
>
{buttonText || defaultButtonText} {buttonText || defaultButtonText}
</Button> </Button>
); );

86
src/pages/register/supplier/CommonFormSections.tsx
View File

@ -16,7 +16,7 @@ import {
Radio, Radio,
Cascader, Cascader,
Empty, Empty,
Descriptions Descriptions,
} from 'antd'; } from 'antd';
import { UploadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons'; import { UploadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { message } from 'antd'; import { message } from 'antd';
@ -25,7 +25,7 @@ import { getRegionTree, getregionInternational } from '@/servers/api/register';
import { getDictList } from '@/servers/api/dicts'; import { getDictList } from '@/servers/api/dicts';
import type { DictItem } from '@/servers/api/dicts'; import type { DictItem } from '@/servers/api/dicts';
import FileUpload from '@/components/FileUpload/FileUpload'; import FileUpload from '@/components/FileUpload/FileUpload';
import DictRegionSelect from '@/components/CommonSelect/DictRegionSelect' import DictRegionSelect from '@/components/CommonSelect/DictRegionSelect';
const { Option } = Select; const { Option } = Select;
@ -474,40 +474,40 @@ export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form, su
const domesticColumns: ColumnType[] = const domesticColumns: ColumnType[] =
supplierType === 'dvs' supplierType === 'dvs'
? [ ? [
{ {
title: '银联号', title: '银联号',
dataIndex: 'interbankNumber', dataIndex: 'interbankNumber',
render: (text, record) => ( render: (text, record) => (
<Form.Item <Form.Item
name={[record.name, 'interbankNumber']} name={[record.name, 'interbankNumber']}
noStyle noStyle
rules={[{ required: true, message: '请输入银联号' }]} rules={[{ required: true, message: '请输入银联号' }]}
> >
<Input placeholder="请输入银联号" /> <Input placeholder="请输入银联号" />
</Form.Item> </Form.Item>
), ),
}, },
] ]
: []; : [];
// 境外企业特有列 // 境外企业特有列
const foreignColumns: ColumnType[] = const foreignColumns: ColumnType[] =
supplierType === 'ovs' supplierType === 'ovs'
? [ ? [
{ {
title: 'SWIFT CODE', title: 'SWIFT CODE',
dataIndex: 'swiftCode', dataIndex: 'swiftCode',
render: (text, record) => ( render: (text, record) => (
<Form.Item <Form.Item
name={[record.name, 'swiftCode']} name={[record.name, 'swiftCode']}
noStyle noStyle
rules={[{ required: true, message: '请输入SWIFT CODE' }]} rules={[{ required: true, message: '请输入SWIFT CODE' }]}
> >
<Input placeholder="请输入SWIFT CODE" /> <Input placeholder="请输入SWIFT CODE" />
</Form.Item> </Form.Item>
), ),
}, },
] ]
: []; : [];
// 通用列 // 通用列
@ -589,11 +589,10 @@ export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form, su
</Form.Item> </Form.Item>
{/* 级联选择器用于用户选择 */} {/* 级联选择器用于用户选择 */}
<Form.Item <Form.Item noStyle rules={[{ required: true, message: '请选择地址' }]}>
noStyle <DictRegionSelect
rules={[{ required: true, message: '请选择地址' }]} onChange={(value: any) => handleAddressChange(value as string[], record)}
> />
<DictRegionSelect onChange={(value:any) => handleAddressChange(value as string[], record)} />
{/* <Cascader {/* <Cascader
options={addressOptions} options={addressOptions}
placeholder="请选择地址" placeholder="请选择地址"
@ -834,7 +833,6 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
> >
下载模版 下载模版
</Button> </Button>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="请加盖公司公章后上传"> <Descriptions.Item label="请加盖公司公章后上传">
<Form.List name="coscoSupplierSurveyAttachments"> <Form.List name="coscoSupplierSurveyAttachments">
@ -868,11 +866,10 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={[field.name, 'fileUrl']} name={[field.name, 'fileUrl']}
rules={[{ required: true, message: '请上传已盖章的反商业贿赂承诺书' }]} rules={[{ required: true, message: '请上传已盖章的反商业贿赂承诺书' }]}
style={{marginBottom: 0}} style={{ marginBottom: 0 }}
getValueFromEvent={(value) => { getValueFromEvent={(value) => {
if (value && value.length > 0) { if (value && value.length > 0) {
const file = value[0]; const file = value[0];
@ -884,8 +881,8 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
fileSize: file.size.toString(), fileSize: file.size.toString(),
fileUrl: file.url, fileUrl: file.url,
filePath: file.filePath, filePath: file.filePath,
} },
} },
}); });
return file.url; return file.url;
} }
@ -902,6 +899,7 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
maxCount={1} maxCount={1}
allowedTypes={['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png']} allowedTypes={['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png']}
maxSize={10} maxSize={10}
tip="pdf,doc,docx,jpg,jpeg,png类型的文件,大小不超过10MB"
/> />
</Form.Item> </Form.Item>
</div> </div>
@ -910,9 +908,7 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
); );
}} }}
</Form.List> </Form.List>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
<div className="form-section-title">其他附件</div> <div className="form-section-title">其他附件</div>
@ -924,7 +920,7 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
style={{ background: '#fff' }} style={{ background: '#fff' }}
> >
<Descriptions.Item label="其他附件（非必须上传）"> <Descriptions.Item label="其他附件（非必须上传）">
<Form.List name="coscoSupplierSurveyAttachments"> <Form.List name="coscoSupplierSurveyAttachments">
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<> <>
{fields.map((field, index) => ( {fields.map((field, index) => (
@ -970,8 +966,8 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
fileSize: file.size.toString(), fileSize: file.size.toString(),
fileUrl: file.url, fileUrl: file.url,
filePath: file.filePath, filePath: file.filePath,
} },
} },
}); });
return file.url; return file.url;
} }

18
src/utils/utils.ts
View File

@ -1,17 +1,25 @@
import { message,Upload } from 'antd'; import { message, Upload } from 'antd';
// 验证上传文件大小是否符合要求 // 验证上传文件大小是否符合要求
// 参数说明: // 参数说明:
// file: 上传的文件 // file: 上传的文件
// maxSize: 最大文件大小 // maxSize: 最大文件大小
export const validateFileSize = (file: File, maxSize: number) => { export const validateFileSize = (file: File, maxSize: number, type: string[]) => {
// 自己抓取文件的后缀名
const dotIndex = file.name.lastIndexOf('.');
const fileType = dotIndex !== -1 ? file.name.substring(dotIndex + 1) : '';
const { LIST_IGNORE } = Upload; const { LIST_IGNORE } = Upload;
const isLtMaxSize = file.size / 1024 / 1024 < maxSize; const isLtMaxSize = file.size / 1024 / 1024 < maxSize;
if (!isLtMaxSize) { if (!isLtMaxSize) {
message.error(`文件大小不能超过${maxSize}MB!`); message.error(`文件大小不能超过${maxSize}MB!`);
return LIST_IGNORE; return LIST_IGNORE;
} }
return isLtMaxSize; const isValidFormat = type.includes('*') || (fileType ? type.includes(fileType) : type.includes(''));
if (!isValidFormat) {
message.error(`只能上传${type.join(',')}格式文件!`);
return LIST_IGNORE;
}
return isValidFormat && isLtMaxSize;
}; };
@ -33,11 +41,11 @@ export const generateUUID = (length: number) => {
if (typeof window !== 'undefined' && window.crypto && window.crypto.getRandomValues) { if (typeof window !== 'undefined' && window.crypto && window.crypto.getRandomValues) {
const array = new Uint8Array(length); const array = new Uint8Array(length);
window.crypto.getRandomValues(array); window.crypto.getRandomValues(array);
for (let i = 0; i < length - result.length; i++) { for (let i = 0;i < length - result.length;i++) {
randomPart.push(characters.charAt(array[i] % charactersLength)); randomPart.push(characters.charAt(array[i] % charactersLength));
} }
} else { } else {
for (let i = 0; i < length - result.length; i++) { for (let i = 0;i < length - result.length;i++) {
randomPart.push(characters.charAt(Math.floor(Math.random() * charactersLength))); randomPart.push(characters.charAt(Math.floor(Math.random() * charactersLength)));
} }
} }