antd upload上传文件过大时, 如何去除文件上传中的提示信息

发布于 2022-09-06 08:42:11 字数 2826 浏览 8 评论 0

图片描述

代码

class BrandUploader extends React.Component {
    constructor({ value }) {
        super();
        this.state = {
            previewVisible: false,
            previewImage: '',
            ...this.initData(value)
        };
    }
    componentWillReceiveProps({ value }) {
        this.setState({
            ...this.initData()
        });
    }
    initData = (value) => {
        let fileList = (value|| []).map((item, i) => {
            return {
                uid: `temp${i}`,
                name: item,
                status: 'done',
                url: item
            };
        });
        return {
            fileList,
            value
        };
    }
    handleCancel = () => this.setState({ previewVisible: false })
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true
        });
    }
    handleChange = ({ fileList }) => {
        this.setState({ fileList });
    }
    beforeUpload = (maxSize, file) => {
        let reg = new RegExp(/^image\/\jpeg|gif|jpg|png$/, 'i');
        if (reg.test(file.type)) {
            if (file.size/1024 <= 200) {
                return true;
            } else {
                message.info('上传文件过大');
                return false;
            }
        } else {
            message.info('图片格式不对');
            return false;
        }
    }
    render() {
        const { previewVisible, previewImage, fileList } = this.state;
        const { limit, maxSize, appPath='goods' } = this.props;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    name='file'
                    action='/resources-uploadfile/photo/photos'
                    listType="picture-card"
                    data={{ appPath: appPath }}
                    fileList={fileList}
                    beforeUpload={this.beforeUpload.bind(this, maxSize)}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                >
                    {fileList.length >= 1 ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </div>
        );
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

软的没边 2022-09-13 08:42:11

这不是你在beforeUpload里写的吗?直接把beforeUpload里的大小判断的代码去掉就可以了


beforeUpload = (maxSize, file) => {
        let reg = new RegExp(/^image\/\jpeg|gif|jpg|png$/, 'i');
        if (reg.test(file.type)) {
            return true;
        } else {
            message.info('图片格式不对');
            return false;
        }
    }
百变从容 2022-09-13 08:42:11

添加最后一行代码试试

<Upload
    name='file'
    action='/resources-uploadfile/photo/photos'
    listType="picture-card"
    data={{ appPath: appPath }}
    fileList={fileList}
    beforeUpload={this.beforeUpload.bind(this, maxSize)}
    onPreview={this.handlePreview}
    onChange={this.handleChange}
    showUploadList={{showPreviewIcon: false}}   //or    showUploadList={false}
    >
桃扇骨 2022-09-13 08:42:11

图片描述

ぶ宁プ宁ぶ 2022-09-13 08:42:11

您好 请问您的问题解决了嘛

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文