antd-Upload组件,验证不通过停止上传,不显示fileList

antdUpload组件上传文件,验证不通过清除或者不显示下边的fileList
参考API:

image.png

关键在于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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容