Ant Design－Upload 相關的 Props

隨手記。

beforeUpload

預設會在選取檔案後自動上傳（發 request），如果想取消這個行為可以用 beforeUpload 來處理：

<Upload beforeUpload={() => false}>
  <Button>Upload</Button>
</Upload>

只要回傳 false 就會取消了。

我們自己比較常做一些處理後在上傳，所以不常用到這個內建功能。

實際用途

除了取消自動上傳以外，這個 function 也會接收兩個參數：

• 單個檔案（如果多選的話會重複呼叫這個 function）
• 組成 List 的檔案內容

例如說：

function onFileSelect(file: File, fileList: File[]) {
  console.log('single file: ', file)
  console.log('file list: ', fileList)
  return false
}

;<Upload multiple={true} beforeUpload={onFileSelect} showUploadList={false}>
  <Button>Upload</Button>
</Upload>

當我選了兩個檔案後會輸出：

所以如果你想要對這些資料做處理的話，這是一個很不錯的 hook。

showUploadList

預設在選完檔案後會自動生成檔案列表，可以用這個 props 來取消：

<Upload showUploadList={false}>
  <Button>Upload</Button>
</Upload>