前言

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