diff --git a/src/packages/uploader/demos/h5/demo7.tsx b/src/packages/uploader/demos/h5/demo7.tsx index 72c432371f..dca2bda423 100644 --- a/src/packages/uploader/demos/h5/demo7.tsx +++ b/src/packages/uploader/demos/h5/demo7.tsx @@ -3,6 +3,15 @@ import { Uploader } from '@nutui/nutui-react' const Demo7 = () => { const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts' - return + return ( + { + console.log('onOverLimit', files) + }} + /> + ) } export default Demo7 diff --git a/src/packages/uploader/demos/taro/demo8.tsx b/src/packages/uploader/demos/taro/demo8.tsx index 80e0dfd90b..5fcd5865f2 100644 --- a/src/packages/uploader/demos/taro/demo8.tsx +++ b/src/packages/uploader/demos/taro/demo8.tsx @@ -3,6 +3,15 @@ import { Uploader } from '@nutui/nutui-react-taro' const Demo8 = () => { const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts' - return + return ( + { + console.log('onOverLimit', files) + }} + /> + ) } export default Demo8 diff --git a/src/packages/uploader/doc.en-US.md b/src/packages/uploader/doc.en-US.md index 5c3961d250..8e4ebe555a 100644 --- a/src/packages/uploader/doc.en-US.md +++ b/src/packages/uploader/doc.en-US.md @@ -174,6 +174,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | File upload started | `(option: UploadOptions) => void` | `-` | | onProgress | Progress of file upload | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | Triggered when the file size exceeds the limit | `(file: File[]) => void` | `-` | +| onOverLimit | Triggered when the number of files exceeds the maxCount | `(file: File[]) => void` | `-` | | onSuccess | uploaded successfully | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | upload failed | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | Status when uploaded files change | `(files: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/doc.md b/src/packages/uploader/doc.md index 0926615069..8dbdb3b509 100644 --- a/src/packages/uploader/doc.md +++ b/src/packages/uploader/doc.md @@ -175,6 +175,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` | | onProgress | 文件上传的进度 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | 文件大小超过限制时触发 | `(file: File[]) => void` | `-` | +| onOverLimit | 文件数量超过限制时触发 | `(file: File[]) => void` | `-` | | onSuccess | 上传成功 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | 上传失败 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | 上传文件改变时的状态 | `(files: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/doc.taro.md b/src/packages/uploader/doc.taro.md index 70a118afb2..86e50cb0f3 100644 --- a/src/packages/uploader/doc.taro.md +++ b/src/packages/uploader/doc.taro.md @@ -175,6 +175,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` | | onProgress | 文件上传的进度 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | 文件大小超过限制时触发 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;files: FileItem[]}) => void` | `-` | +| onOverLimit | 文件数量超过限制时触发 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;files: FileItem[]}) => void` | `-` | | onSuccess | 上传成功 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | 上传失败 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | 上传文件改变时的状态 | `(param: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/doc.zh-TW.md b/src/packages/uploader/doc.zh-TW.md index 5f3ab9f846..eb7b02159b 100644 --- a/src/packages/uploader/doc.zh-TW.md +++ b/src/packages/uploader/doc.zh-TW.md @@ -174,6 +174,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | 文件上傳開始 | `(option: UploadOptions) => void` | `-` | | onProgress | 文件上傳的進度 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | 文件大小超過限制時觸發 | `(file: File[]) => void` | `-` | +| onOverLimit | 文件數量超過限製時觸發 | `(file: File[]) => void` | `-` | | onSuccess | 上傳成功 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | 上傳失敗 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | 上傳文件改變時的狀態 | `(files: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx index 4706d052da..44815eba61 100644 --- a/src/packages/uploader/uploader.taro.tsx +++ b/src/packages/uploader/uploader.taro.tsx @@ -112,6 +112,9 @@ export interface UploaderProps extends BasicComponent { onOversize?: ( files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any ) => void + onOverLimit?: ( + files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any + ) => void onChange?: (files: FileItem[]) => void beforeUpload?: ( files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any @@ -199,6 +202,7 @@ const InternalUploader: ForwardRefRenderFunction< onUpdate, onFailure, onOversize, + onOverLimit, beforeUpload, beforeXhrUpload, beforeDelete, @@ -387,6 +391,7 @@ const InternalUploader: ForwardRefRenderFunction< } const readFile = (files: T[]) => { + const _files: FileItem[] = [] files.forEach((file: T, index: number) => { let fileType = file.type const filepath = (file.tempFilePath || file.path) as string @@ -426,9 +431,12 @@ const InternalUploader: ForwardRefRenderFunction< } if (preview) { fileItem.url = fileType === 'video' ? file.thumbTempFilePath : filepath + _files.push(fileItem) + } else { + _files.push(fileItem) } executeUpload(fileItem, index) - setFileList([...fileList, fileItem]) + setFileList(_files) }) } @@ -448,6 +456,7 @@ const InternalUploader: ForwardRefRenderFunction< const currentFileLength = filterFile.length + fileList.length if (currentFileLength > maximum) { filterFile.splice(filterFile.length - (currentFileLength - maximum)) + onOverLimit?.(filterFile) } return filterFile } diff --git a/src/packages/uploader/uploader.tsx b/src/packages/uploader/uploader.tsx index 6f008eb460..29ca7d9fcb 100644 --- a/src/packages/uploader/uploader.tsx +++ b/src/packages/uploader/uploader.tsx @@ -65,6 +65,7 @@ export interface UploaderProps extends BasicComponent { }) => void onUpdate?: (files: FileItem[]) => void onOversize?: (files: File[]) => void + onOverLimit?: (files: File[]) => void onChange?: (files: FileItem[]) => void beforeUpload?: (files: File[]) => Promise beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void @@ -145,6 +146,7 @@ const InternalUploader: ForwardRefRenderFunction< onUpdate, onFailure, onOversize, + onOverLimit, beforeUpload, beforeXhrUpload, beforeDelete, @@ -288,6 +290,7 @@ const InternalUploader: ForwardRefRenderFunction< } const readFile = (files: File[]) => { + const _files: FileItem[] = [] files.forEach((file: File, index: number) => { const formData = new FormData() formData.append(name, file) @@ -301,16 +304,17 @@ const InternalUploader: ForwardRefRenderFunction< ? locale.uploader.readyUpload : locale.uploader.waitingUpload executeUpload(fileItem, index) - if (preview && file.type?.includes('image')) { const reader = new FileReader() reader.onload = (event: ProgressEvent) => { fileItem.url = (event.target as FileReader).result as string - setFileList([...fileList, fileItem]) + _files.push(fileItem) + setFileList(_files) } reader.readAsDataURL(file) } else { - setFileList([...fileList, fileItem]) + _files.push(fileItem) + setFileList(_files) } }) } @@ -326,9 +330,9 @@ const InternalUploader: ForwardRefRenderFunction< return true }) oversizes.length && onOversize?.(files) - if (filterFile.length > maximum) { filterFile.splice(maximum, filterFile.length - maximum) + onOverLimit?.(filterFile) } if (fileList.length !== 0) { const index = maximum - fileList.length