上整体代码
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;
}
},