diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx index 92c5972929..4b2bbb93e5 100644 --- a/src/packages/uploader/uploader.taro.tsx +++ b/src/packages/uploader/uploader.taro.tsx @@ -3,6 +3,8 @@ import React, { useImperativeHandle, ForwardRefRenderFunction, PropsWithChildren, + useRef, + useEffect, } from 'react' import classNames from 'classnames' import Taro, { @@ -220,7 +222,10 @@ const InternalUploader: ForwardRefRenderFunction< clearUploadQueue() }, })) - + const fileListRef = useRef([]) + useEffect(() => { + fileListRef.current = fileList + }, [fileList]) const clearUploadQueue = (index = -1) => { if (index > -1) { uploadQueue.splice(index, 1) @@ -300,11 +305,10 @@ const InternalUploader: ForwardRefRenderFunction< uploadOption.headers = headers uploadOption.taroFilePath = fileItem.path uploadOption.beforeXhrUpload = beforeXhrUpload - uploadOption.onStart = (option: UploadOptions) => { clearUploadQueue(index) setFileList( - fileList.map((item) => { + fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = 'ready' item.message = locale.uploader.readyUpload @@ -312,18 +316,17 @@ const InternalUploader: ForwardRefRenderFunction< return item }) ) - onStart && onStart(option) + onStart?.(option) } uploadOption.onProgress = (e: any, option: UploadOptions) => { setFileList( - fileList.map((item) => { + fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = UPLOADING item.message = locale.uploader.uploading item.percentage = e.progress - onProgress && - onProgress({ e, option, percentage: item.percentage as number }) + onProgress?.({ e, option, percentage: item.percentage as number }) } return item }) @@ -334,7 +337,7 @@ const InternalUploader: ForwardRefRenderFunction< responseText: XMLHttpRequest['responseText'], option: UploadOptions ) => { - const list = fileList.map((item) => { + const list = fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = SUCCESS item.message = locale.uploader.success @@ -354,7 +357,7 @@ const InternalUploader: ForwardRefRenderFunction< responseText: XMLHttpRequest['responseText'], option: UploadOptions ) => { - const list = fileList.map((item) => { + const list = fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = ERROR item.message = locale.uploader.error @@ -424,8 +427,8 @@ const InternalUploader: ForwardRefRenderFunction< if (preview) { fileItem.url = fileType === 'video' ? file.thumbTempFilePath : filepath } - setFileList([...fileList, fileItem]) executeUpload(fileItem, index) + setFileList([...fileList, fileItem]) }) } @@ -440,9 +443,7 @@ const InternalUploader: ForwardRefRenderFunction< } return true }) - if (oversizes.length) { - onOversize && onOversize(files as any) - } + oversizes.length && onOversize?.(files as any) const currentFileLength = filterFile.length + fileList.length if (currentFileLength > maximum) { diff --git a/src/packages/uploader/uploader.tsx b/src/packages/uploader/uploader.tsx index db7d573f27..fd885cd330 100644 --- a/src/packages/uploader/uploader.tsx +++ b/src/packages/uploader/uploader.tsx @@ -3,6 +3,8 @@ import React, { useImperativeHandle, ForwardRefRenderFunction, PropsWithChildren, + useRef, + useEffect, } from 'react' import classNames from 'classnames' import { Photograph } from '@nutui/icons-react' @@ -102,6 +104,7 @@ const InternalUploader: ForwardRefRenderFunction< PropsWithChildren> > = (props, ref) => { const { locale } = useConfig() + const fileListRef = useRef([]) const { children, uploadIcon, @@ -155,7 +158,9 @@ const InternalUploader: ForwardRefRenderFunction< const [uploadQueue, setUploadQueue] = useState[]>([]) const classes = classNames(className, 'nut-uploader') - + useEffect(() => { + fileListRef.current = fileList + }, [fileList]) useImperativeHandle(ref, () => ({ submit: () => { Promise.all(uploadQueue).then((res) => { @@ -166,7 +171,6 @@ const InternalUploader: ForwardRefRenderFunction< clearUploadQueue() }, })) - const clearUploadQueue = (index = -1) => { if (index > -1) { uploadQueue.splice(index, 1) @@ -202,7 +206,7 @@ const InternalUploader: ForwardRefRenderFunction< uploadOption.onStart = (option: UploadOptions) => { clearUploadQueue(index) setFileList( - fileList.map((item) => { + fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = 'ready' item.message = locale.uploader.readyUpload @@ -210,19 +214,19 @@ const InternalUploader: ForwardRefRenderFunction< return item }) ) - onStart && onStart(option) + onStart?.(option) } uploadOption.onProgress = ( e: ProgressEvent, option: UploadOptions ) => { setFileList( - fileList.map((item) => { + fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = UPLOADING item.message = locale.uploader.uploading item.percentage = ((e.loaded / e.total) * 100).toFixed(0) - onProgress && onProgress({ e, option, percentage: item.percentage }) + onProgress?.({ e, option, percentage: item.percentage }) } return item }) @@ -232,7 +236,7 @@ const InternalUploader: ForwardRefRenderFunction< responseText: XMLHttpRequest['responseText'], option: UploadOptions ) => { - const list = fileList.map((item) => { + const list = fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = SUCCESS item.message = locale.uploader.success @@ -252,7 +256,7 @@ const InternalUploader: ForwardRefRenderFunction< responseText: XMLHttpRequest['responseText'], option: UploadOptions ) => { - const list = fileList.map((item) => { + const list = fileListRef.current.map((item) => { if (item.uid === fileItem.uid) { item.status = ERROR item.message = locale.uploader.error @@ -293,7 +297,6 @@ const InternalUploader: ForwardRefRenderFunction< fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload - executeUpload(fileItem, index) if (preview && file.type?.includes('image')) { @@ -319,9 +322,7 @@ const InternalUploader: ForwardRefRenderFunction< } return true }) - if (oversizes.length) { - onOversize && onOversize(files) - } + oversizes.length && onOversize?.(files) if (filterFile.length > maximum) { filterFile.splice(maximum, filterFile.length - maximum) @@ -367,8 +368,6 @@ const InternalUploader: ForwardRefRenderFunction< readFile(_files) } - setFileList(fileList) - if (clearInput) { clearInputValue($el) }