Ant Design 上传组件 - 支持一次请求发送多个文件

Question

我正在使用ant design上传组件向服务器上传多个文件。

const props = {
    multiple: true,
    showUploadList: false,
    beforeUpload: () => {
        return false              
    },
    onChange: (info: any) => {
        console.log(info)
        setAttachmentLoader(true)
        info.fileList.forEach((file: any) => {
            formData.append("upload2[]", file.originFileObj)
        })
        formData.append("_charset_", "UTF-8")
        formData.append("upload2-data", "")
        uploadApiFunction(formData, (res: any) => {
            setAttachmentLoader(false)
            res.text && message.success(res?.text, 4)
        }, (err: any) => { console.log(err); setAttachmentLoader(false) })
    },
};

            <Upload {...props} fileList={[]}>
                <PrimaryButton text="Add attachment" />
            </Upload>

当我上传多个文件时，每个文件都会调用 api。我希望所有选定的文件都应该在一个请求中上传到服务器。

谁能帮帮我？

Answer 1

onChange 每次当文件列表改变时调用，你需要将 onChange 调用转移到另一个按钮，如 documentation

Ant Design 上传组件 - 支持一次请求发送多个文件

Ant Design upload component - enable sending multiple files in single request

javascript

file-upload

reactjs

antd