react antd上传文件限制必填、只允许上传文件、删除提示、限制文件小于50M
上整体代码
import { Form, Upload } from 'dtd';
import { UploadOutlined } from '@dtfe/icons';
let props = {
accept: '.zip',
action: '/reportReview/api/v1/jianzai/file/upload',
data: { taskNumber, industryCode },
headers: {},
maxCount: 1,
// 删除
onRemove: (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
let newFileList = state.fileList.slice();
newFileList.splice(index - 1, 1);
return {
fileList: newFileList,
fileName: [],
};
});
},
//文件上传之前的操作
beforeUpload: (file) => {
// 设置上传文件大小小于50M
const isLt50M = file.size / 1024 / 1024 < 50;
if (!this.state.fileList.length) {
if (!isLt50M) {
message.error('文件不允许超过50M!');
} else {
this.setState((state) => ({
fileName: file.name,
fileList: [...state.fileList, file],
}));
}
} else {
message.error('只能上传一个文件');
this.setState((state) => ({
fileName: file.name,
fileList: [...state.fileList],
}));
return false;
}
},
};
return (
<div>
<Form {...layout} name="control-hooks" ref={this.formRef}>
<Form.Item
name="qualityReport"
label="行业质量报告"
rules={[
{ required: true, message: '' },
() => ({
validator(rule, value) {
if (!value || value.file.status === 'removed') {
return Promise.reject('请选择行业质量报告!');
}
return Promise.resolve();
},
}),
]}
tooltip={{ title: '请上传.zip格式文件' }}
>
<Upload {...props} fileList={this.state.fileList}>
<Button>
<UploadOutlined /> 上传
</Button>
</Upload>
</Form.Item>
</Form>
</div>)
上传文件限制必填、删除提示
如果是像input、select之类的样式组件,删除之后对应参数值为undefined,直接限制必填就可以,upload样式删除之后,对应参数依旧有内容,这是file.status变成removed,需要再次限制
rules={[
{ required: true, message: '' },
() => ({
validator(rule, value) {
if (!value || value.file.status === 'removed') {
return Promise.reject('请选择行业质量报告!');
}
return Promise.resolve();
},
}),
]}
限制文件小于50M
beforeUpload是upload自定义组件内置方法,文件上传之前的操作
//文件上传之前的操作
beforeUpload: (file) => {
// 设置上传文件大小小于50M
const isLt50M = file.size / 1024 / 1024 < 50;
if (!this.state.fileList.length) {
if (!isLt50M) {
message.error('文件不允许超过50M!');
} else {
this.setState((state) => ({
fileName: file.name,
fileList: [...state.fileList, file],
}));
return false;
}
} else {
message.error('只能上传一个文件');
this.setState((state) => ({
fileName: file.name,
fileList: [...state.fileList],
}));
return false;
}
},
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgagceb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01