diff --git a/src/components/UploadFormItem/index.tsx b/src/components/UploadFormItem/index.tsx index 4d48adb..c5bb28f 100644 --- a/src/components/UploadFormItem/index.tsx +++ b/src/components/UploadFormItem/index.tsx @@ -3,8 +3,8 @@ * @公司: thundersdata * @作者: 阮旭松 * @Date: 2020-06-11 10:22:48 - * @LastEditors: 廖军 - * @LastEditTime: 2020-11-25 17:53:23 + * @LastEditors: 阮旭松 + * @LastEditTime: 2020-12-10 18:02:41 */ import React, { forwardRef } from 'react'; import { Form, Button, Upload, Tooltip } from 'antd'; @@ -14,9 +14,10 @@ import { ATTACHMENT_MAX_FILE_COUNT, handleUpload, getFileSizeName, - getBeforeUpload, ATTACHMENT_MAX_FILE_SIZE, + FileValidatorsProps, } from '@/utils/upload'; +import { RcFile } from 'antd/lib/upload/interface'; import { InternalFieldProps } from 'rc-field-form/es/Field'; import { UploadProps, UploadChangeParam } from 'antd/lib/upload'; import { FormItemLabelProps } from 'antd/lib/form/FormItemLabel'; @@ -108,13 +109,10 @@ const UploadFormItem: React.FC = uploadItemProps => { /** 改变上传文件调用 */ const handleChange = async (info: UploadChangeParam) => { - onChange && onChange(info); - if (setLoading) { - setLoading(true); + onChange?.(info); - if (!info.fileList.find(item => item.status === 'uploading')) { - setLoading(false); - } + if (!info.fileList.find(item => item.status === 'uploading')) { + setLoading?.(false); } }; @@ -144,6 +142,26 @@ const UploadFormItem: React.FC = uploadItemProps => { {label} ); + /** 判断是否可以上传 */ + const getBeforeUpload = (validatorObj: FileValidatorsProps) => ( + file: RcFile, + ) => { + const errorMessageList: string[] = []; + /** 若不符合要求阻断上传 */ + getFileValidators(validatorObj).forEach(item => { + item.validator('', [file], (error?: string) => { + if (error) { + errorMessageList.push(error); + } + }); + }); + const result = errorMessageList.length === 0; + if (result) { + setLoading?.(true); + } + return result; + }; + return ( { }; export const onPreview = (file: UploadFile) => { - window.open(file.url || getDownloadUrlWithId(file.response.data.fileId), '_blank'); + window.open( + file.url || getDownloadUrlWithId(file.response.data.fileId), + '_blank', + ); }; // 判断是否符合文件格式,不传默认校验type @@ -150,12 +152,20 @@ export const getFileSizeName = (size: number | boolean): string => { * @param params maxSize (KB) * @param {object} 返回验证rule对象 */ -export function validatorFileListSizeRule(params = { maxSize: ATTACHMENT_MAX_FILE_SIZE }) { +export function validatorFileListSizeRule( + params = { maxSize: ATTACHMENT_MAX_FILE_SIZE }, +) { const { maxSize } = params; return { - validator: (_rule: unknown, values: UploadFile[], callback: (error?: string) => void) => { + validator: ( + _rule: unknown, + values: UploadFile[], + callback: (error?: string) => void, + ) => { if (values && values.length) { - const validationFailedList = values.filter(file => file.size / BASE_BYTE > maxSize); + const validationFailedList = values.filter( + file => file.size / BASE_BYTE > maxSize, + ); if (validationFailedList.length) { const names = validationFailedList.map(file => file.name).join(','); callback( @@ -185,13 +195,19 @@ export function validatorFileListSuffixRule( ) { const { accept } = params; return { - validator: (_: unknown, values: UploadFile[], callback: (error?: string) => void) => { + validator: ( + _: unknown, + values: UploadFile[], + callback: (error?: string) => void, + ) => { if (values && values.length) { const typeValidationFailedList = values.filter( (file: UploadFile) => !isPermitFile(file, accept), ); if (typeValidationFailedList.length) { - const names = typeValidationFailedList.map((file: UploadFile) => file.name).join(','); + const names = typeValidationFailedList + .map((file: UploadFile) => file.name) + .join(','); callback(`${names},文件类型不符合要求`); } else { callback(); @@ -215,7 +231,11 @@ export function validatorFileListCount( ) { const { maxCount } = params; return { - validator: (_: unknown, values: UploadFile[], callback: (error?: string) => void) => { + validator: ( + _: unknown, + values: UploadFile[], + callback: (error?: string) => void, + ) => { if (values && values.length) { if (values.length > maxCount) { callback(`文件个数超过 ${maxCount} 个!`); @@ -236,30 +256,12 @@ export function validatorFileListCount( export const getFileValidators = (params: FileValidatorsProps) => { const validatorList = Object.keys(params).filter(item => !!params[item]); return validatorList.map(item => - params[item] === true ? VALIDATOR_MAP[item]() : VALIDATOR_MAP[item]({ [item]: params[item] }), + params[item] === true + ? VALIDATOR_MAP[item]() + : VALIDATOR_MAP[item]({ [item]: params[item] }), ); }; -/** - * 传入校验数组获得 beforeUpload 函数(如果有单独的 Upload 需要类型、大小校验可以用这个函数) - * maxCount 最好不要在 beforeUpload 中处理,因为拿到的 fileList 只是改变的文件列表而不包含原来的 - */ -export const getBeforeUpload = (validatorObj: FileValidatorsProps, showMessage?: boolean) => ( - file: RcFile, -) => { - const errorMessageList: string[] = []; - /** 若不符合要求阻断上传 */ - getFileValidators(validatorObj).forEach(item => { - item.validator('', [file], (error?: string) => { - if (error) { - errorMessageList.push(error); - showMessage && message.error(error); - } - }); - }); - return errorMessageList.length === 0; -}; - /** * 将后端返回的附件转换成上传文件需要的格式 * @param files @@ -309,4 +311,5 @@ export function transformFile(files?: UploadFile[]): FileDTO[] { * @param fileId * 图片地址 */ -export const getImgPreviewUrl = (fileId: string) => `${UPLOAD_URL}/file/preview?fileId=${fileId}`; +export const getImgPreviewUrl = (fileId: string) => + `${UPLOAD_URL}/file/preview?fileId=${fileId}`;