antd組件Upload實現自己上傳

前言

在實現圖片上傳時，可能需要用到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