antd component Upload realizes self Upload

Preface

When uploading pictures, you may need to use Upload, but the default Upload method is to Upload pictures directly after adding them. If you want to Upload the last time, you need to customize the content.

//Add button style
const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
 );


<Upload
              //style
              className={styles['override-ant-btn']}
              //Display style, now card
              listType="picture-card"
              //Then upload the image to the page and execute the function. Customize it so that it doesn't execute
              beforeUpload={() => false}
              //Data, or pictures, is an array
              fileList={fileList}
              //Called when you click View (the eye above)
              onPreview={this.handlePreview}
              //Called when data changes
              onChange={this.handleChange}
            >
              //When there is no less than one picture, the button of how to add picture will not be displayed.
              {fileList.length >= 1 ? null : uploadButton}
            </Upload>

There is also a function called onRemove() when removing, that is, click the garbage can in the figure above, which is not defined here.

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


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

Use Modal to display pictures.

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

Reset the value of the fileList array directly when the data changes (I have only one diagram here to do this).

Finally, there are some basic settings of fileList:

fileList: [{
          uid: 'id',
          name: 'Title',
          //Current status
          status: 'done',
          //The url or base64 of the picture
          url: '',
          type: 'image/jpeg',
        }],

Tags: Javascript less

Posted on Wed, 04 Dec 2019 07:24:43 -0800 by glennn3