antd
中Upload
组件上传文件,验证不通过清除或者不显示下边的fileList
参考API:
关键在于beforeUpload
// 上传文档限制
const uploadDocumentLimit = (file, type, limitSize) => {
return new Promise((resolve, reject) => {
const isFormat = judgeFormat(file, type)
if (!isFormat) {
message.error(`只能上传${type}!`)
return reject(false)
}
const isLimit = file.size / 1024 / 1024 <= limitSize
if (!isLimit) {
message.error(`文件必须小于${limitSize}M`)
return reject(false)
}
const fileLength = file.name.length <= 50
if (!fileLength) {
message.error("文件名称长度不超过50个字符")
return reject(false)
}
return resolve(true)
})
}
<Form.Item
label="说明文档"
extra="(请上传格式为.pdf,大小2M说明文件)"
wrapperCol={{ span: 13 }}>
{getFieldDecorator("readmePdf", {
initialValue: editData.readmePdf || '',
rules: [{ required: true, message: "请上传文档" }]
})(
<div>
<Upload
{...uploadConfigs}
defaultFileList={readmePdf || []}
beforeUpload={(file) => uploadDocumentLimit(file, 'PDF文件', 2)}
accept=".pdf"
onChange={(info) => handleChange(info, 'readmePdf')}>
{readmePdf && readmePdf.length >= 1 ? null : uploadButton()}
</Upload>
</div>
)}
</Form.Item>
网友评论