antd上传文件限制大小 react Hooks

最新推荐文章于 2025-03-03 11:12:51 发布

zhangyubababa

最新推荐文章于 2025-03-03 11:12:51 发布

阅读量941

点赞数

分类专栏： react 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/zhangyubababa/article/details/122062603

版权

react 专栏收录该内容

89 篇文章

订阅专栏

 const uploadImages = {
        action: requestUrl + '/api/common/CommonUpload',
        headers: {
            SessionKey: `${localStorage.getItem('sk')}`,
        },
        data: (file) => {
            return {
                UploadType: 1027,//后端定义的type
                Id: uuidv4(),
                FileType: getUploadFileType(file),
            };
        },
        beforeUpload: (file) => {// 礼品image
            const limitFileNameLen = 100;
            return new Promise((resolve, reject) => {
                if (file.name && file.name.length > limitFileNameLen) {
                    message.error('Please upload a file with a file name less than 100 characters');
                    //请上传文件名不超过100个字符的文件
                    return Promise.reject();
                }
                const limitM = 2;
                const isLimit = file.size / 1024 / 1024 <= limitM;
                console.log(isLimit);
                if (!isLimit) {
                    message.error('The size exceeds the limit');
                    return Promise.reject();
                }
                return resolve();
            });
        },
    }
模板：
 <Upload
                {...uploadImages}
                accept=".jpeg,.png,.jpg"
                listType="picture-card"
                fileList={fileList}
                onChange={handleChange}
                onPreview={handlePreview}
            >
                {fileList.length >= 4 ? null : uploadButton}
            </Upload>