antd uplod 文件上传_antd upload maxcount-CSDN博客

本文链接：https://blog.csdn.net/wsqzero0/article/details/112885162

本文档记录了在使用Ant Design的Upload组件进行多图上传时遇到的问题及解决方案。主要涉及如何通过beforeUpload限制上传文件数量，避免超过3个文件，并在文件大小超过30MB时给出提示。此外，还讨论了如何在onChange事件中处理服务器返回错误的情况，通过判断response状态更新fileList的状态。示例代码展示了具体的实现细节。

摘要由CSDN通过智能技术生成

最近使用antd upload组件上传文件遇到一些问题简单记录一下，在使用多图上传得时候要限制上传文件个数，官方提供了maxCount属性，在实际操作中是多个文都上传成功之后再截取限制得文件个数，解决办法是再beforeUpload判断阻止。另一个问题是上传过程中服务端返回正常200响应但是实际上内容是提示错误信息得，要在onChange里判断response是否正确，来改变fileList数组中每一项得status。具体代码如下，实力有限敬请谅解😁！

const upload = (item) => {
        const beforeUpload = (file, fileList) => {
            const list20M = (file.size / 1024 / 1024) < 3
            if (fileList.length > 3) { // 文件个数限制大于3禁止上传
                message.destroy();
                message.error("最多上传3个文件")
                return new Promise((resolve, reject) => {
                    reject();
                })
            }
            if (list20M) { // 文件大小限制
                return true;
            } else { // 超出限制就提示信息返回promise
                message.error("文件大小超出限制");
                return new Promise((resolve, reject) => {
                    if (!list20M) {
                        reject();
                    } else {
                        resolve(file)
                    }
                })
            }
        }
        const onChange = (info) => {
            let fileList = [...info.fileList];
            fileList = fileList.map(file => {  // 循环判断文件列表
                if (file.response) { // 与后端有交互响应
                    if (file.response.status === 0) { // 正常上传
                        file.url = file.response.data.url;
                    } else {
                        if (info.file.uid === file.uid) { // 判断当前文件是否上传失败
                            message.destroy();
                            message.error(file.response.msg)
                            file.status = "error";
                        }

                    }
                }
                return file;
            });
        }
        return (
            <Form.Item
                label={item.label}
                name={item.attribute}
                rules={item.rules}
                valuePropName="fileList"
                getValueFromEvent={normFile}
                extra="为了便于评估活动风险，请上传文档，支持PDF/WORD/EXCEL/PPT（不超过3个，每个30M以内)"
            >
                <Upload accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf" onChange={onChange} maxCount={3} multiple beforeUpload={beforeUpload} action="/api/v3/uploadImgMultType" listType="picture">
                    <Button icon={<UploadOutlined />}>Click to upload</Button>
                </Upload>
            </Form.Item >
        )
    }