diff --git a/src/packages/uploader/demos/taro/demo1.tsx b/src/packages/uploader/demos/taro/demo1.tsx index d07246b714..1a0ecb831e 100644 --- a/src/packages/uploader/demos/taro/demo1.tsx +++ b/src/packages/uploader/demos/taro/demo1.tsx @@ -7,11 +7,20 @@ const Demo1 = () => { const onStart = () => { console.log('start触发') } + const beforeUpload = async (files: File[]) => { + console.log('beforeUpload') + const allowedTypes = ['image/png'] + const filteredFiles = Array.from(files).filter((file) => + allowedTypes.includes(file.type) + ) + return filteredFiles + } return ( { | disabled | 是否禁用文件上传 | `boolean` | `false` | | multiple | 是否支持文件多选 | `boolean` | `false` | | timeout | 超时时间,单位为毫秒 | `number` \| `string` | `1000 * 30` | +| beforeUpload | 上传前的函数需要返回一个`Promise`对象 | `(file: File[]) => Promise` | `-` | | beforeXhrUpload | 执行 XHR 上传时,自定义方式 | `(xhr: XMLHttpRequest, options: any) => void` | `-` | | beforeDelete | 除文件时的回调,返回值为 false 时不移除。支持返回一个 `Promise` 对象,`Promise` 对象 resolve(false) 或 reject 时不移除 | `(file: FileItem, files: FileItem[]) => boolean` | `-` | | onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` | diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx index c6d3756795..68362d5909 100644 --- a/src/packages/uploader/uploader.taro.tsx +++ b/src/packages/uploader/uploader.taro.tsx @@ -115,6 +115,9 @@ export interface UploaderProps extends BasicComponent { files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any ) => void onChange?: (files: FileItem[]) => void + beforeUpload?: ( + files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any + ) => Promise beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void beforeDelete?: (file: FileItem, files: FileItem[]) => boolean onFileItemClick?: (file: FileItem, index: number) => void @@ -196,6 +199,7 @@ const InternalUploader: ForwardRefRenderFunction< onUpdate, onFailure, onOversize, + beforeUpload, beforeXhrUpload, beforeDelete, ...restProps @@ -470,14 +474,34 @@ const InternalUploader: ForwardRefRenderFunction< // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 const { tempFiles } = res const _files: Taro.chooseMedia.ChooseMedia[] = filterFiles(tempFiles) - readFile(_files) + if (beforeUpload) { + beforeUpload(new Array().slice.call(_files)).then( + (f: Array | boolean) => { + const _files: File[] = filterFiles(new Array().slice.call(f)) + if (!_files.length) res.tempFiles = [] + readFile(_files) + } + ) + } else { + readFile(_files) + } } const onChangeImage = (res: Taro.chooseImage.SuccessCallbackResult) => { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 const { tempFiles } = res const _files: Taro.chooseImage.ImageFile[] = filterFiles(tempFiles) - readFile(_files) + if (beforeUpload) { + beforeUpload(new Array().slice.call(_files)).then( + (f: Array | boolean) => { + const _files: File[] = filterFiles(new Array().slice.call(f)) + if (!_files.length) res.tempFiles = [] + readFile(_files) + } + ) + } else { + readFile(_files) + } } const handleItemClick = (file: FileItem, index: number) => {