antd组件Upload完成本身上传

媒介

在完成图片上传时,能够须要用到Upload,然则它默许的上传体式格局是到场图片后直接上传,假如要完成末了再一次性上传,须要自定义内容。

《antd组件Upload完成本身上传》《antd组件Upload完成本身上传》

//增加按钮的款式
const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
 );


<Upload
              //款式
              className={styles['override-ant-btn']}
              //陈设款式,现在是卡片式
              listType="picture-card"
              //再图片上传到页面后实行的函数,自定义让他不实行
              beforeUpload={() => false}
              //数据,即图片,是一个数组
              fileList={fileList}
              //当点击检察时挪用(上图的谁人眼睛)
              onPreview={this.handlePreview}
              //数据转变时挪用
              onChange={this.handleChange}
            >
              //当不少于一张图时,不显现怎加图片的按钮。
              {fileList.length >= 1 ? null : uploadButton}
            </Upload>

另有一个移除时挪用的函数onRemove(),即点击上图的垃圾桶,这里没有定义。

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      visible: true,
    });
  };


        <Modal visible={visible} footer={null} onCancel={this.handleCancel}>
              <img alt="加载" style={{ width: '100%',height: '100%' }} src={previewImage} />
        </Modal>

应用Modal显现图片。

handleChange = ({ fileList }) => {
    this.setState({ fileList });
};

数据转变时直接重设fileList数组的值(我这里只要一张图能够这么做)。

末了是fileList的一些基础设置:

fileList: [{
          uid: 'id',
          name: '题目',
          //现在的状况
          status: 'done',
          //图片的url或许base64
          url: '',
          type: 'image/jpeg',
        }],
    原文作者:猫蘸画
    原文地址: https://segmentfault.com/a/1190000017404796
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞