Skip to content

feat(uploader): support beforeupload props in taro #2567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xiaoyatong merged 1 commit into from
Sep 6, 2024
Merged

feat(uploader): support beforeupload props in taro #2567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/packages/uploader/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Cell style={{ flexWrap: 'wrap' }}>
<Uploader
url={uploadUrl}
onStart={onStart}
beforeUpload={beforeUpload}
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Sep 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

考虑为 src/packages/uploader/uploader.taro.tsx 文件中的 fileList 状态变更生成单元测试。

根据之前的学习，建议为 src/packages/uploader/uploader.taro.tsx 文件中的 fileList 状态变更生成单元测试，以确保功能的正确性。

如果需要帮助生成单元测试代码或创建 GitHub issue 来跟踪此任务，请告诉我。

style={{
marginInlineEnd: '10px',
marginBottom: '10px',
Expand Down
1 change: 1 addition & 0 deletions src/packages/uploader/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
| disabled | 是否禁用文件上传 | `boolean` | `false` |
| multiple | 是否支持文件多选 | `boolean` | `false` |
| timeout | 超时时间，单位为毫秒 | `number` \| `string` | `1000 * 30` |
| beforeUpload | 上传前的函数需要返回一个`Promise`对象 | `(file: File[]) => Promise<File[] \| boolean>` | `-` |
| beforeXhrUpload | 执行 XHR 上传时，自定义方式 | `(xhr: XMLHttpRequest, options: any) => void` | `-` |
| beforeDelete | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | `(file: FileItem, files: FileItem[]) => boolean` | `-` |
| onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` |
Expand Down
28 changes: 26 additions & 2 deletions src/packages/uploader/uploader.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<File[] | boolean>
beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void
beforeDelete?: (file: FileItem, files: FileItem[]) => boolean
onFileItemClick?: (file: FileItem, index: number) => void
Expand Down Expand Up @@ -196,6 +199,7 @@ const InternalUploader: ForwardRefRenderFunction<
onUpdate,
onFailure,
onOversize,
beforeUpload,
beforeXhrUpload,
beforeDelete,
...restProps
Expand Down Expand Up @@ -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<File>().slice.call(_files)).then(
(f: Array<File> | boolean) => {
const _files: File[] = filterFiles(new Array<File>().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<File>().slice.call(_files)).then(
(f: Array<File> | boolean) => {
const _files: File[] = filterFiles(new Array<File>().slice.call(f))
if (!_files.length) res.tempFiles = []
readFile(_files)
}
)
} else {
readFile(_files)
}
}

const handleItemClick = (file: FileItem, index: number) => {
Expand Down