react antd 表单里的上传图片

2021-02-21 01:20

阅读：626

标签：extends error prevent tor orm ons field label this

import React, { Component } from ‘react‘
import { Form, Upload, Button, message } from ‘antd‘;

export default @Form.create()
class ImgUpload extends Component {

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    })
  }
  // 上传之前做一些验证
  beforeUpload = e => {
    if( e.type != ‘image/png‘ ) {
      message.error(‘格式不对‘)
      return false
    }
  }
  // 准备上传，上传中，上传后
  normFile = e => {
    if( e.file.type != ‘image/png‘ ) return false //这里也做一个验证
    if ( Array.isArray(e) ) return e
    return e && e.fileList;
  }

  render() {
    const { getFieldDecorator } = this.props.form
    return (
      
        
          

            {getFieldDecorator(‘upload‘, {
              valuePropName: ‘fileList‘,
              getValueFromEvent: this.normFile,
            })(
              
              ,
            )}
          
          

    )
  }
}

react antd 表单里的上传图片

标签：extends error prevent tor orm ons field label this

原文地址：https://www.cnblogs.com/yetiezhu/p/12913160.html

上一篇：关于Vue中非生产环境打包出的文件没css的原因

下一篇：Jmeter http接口添加header和cookie

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：react antd 表单里的上传图片
文章链接：http://soscw.com/essay/58237.html

亲，登录后才可以留言！

react antd 表单里的上传图片

评论

热门文章

推荐文章

最新文章

置顶文章