美文网首页
antd-Upload组件,验证不通过停止上传,不显示fileL

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

作者: krystal_H | 来源:发表于2021-11-05 11:23 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:antd-Upload组件,验证不通过停止上传,不显示fileL

          本文链接:https://www.haomeiwen.com/subject/ulfrzltx.html