[筆記] 在 File 格式中加入自己想要的額外屬性 @地瓜大的飛翔旅程

章節連結

方法

藉由 JavaScript 萬物皆物件的特性，可以在生成 File 的實例後，加上一些客製化的屬性進去幫助識別。這邊筆記下實作方法，以及最後輸出成一個較為易讀的 Object 結果。

方法

1. 通過 new File 能傳入的實用參數僅有 name 和 type。從定義上來看，File 是一個繼承 Blob 的一個物件
2. 生成後的 File Instance，你可以透過 File[客製化的key] ，來強加東西進去。畢竟 JS 事件萬物都是物件，是可以憑空加入的
3. 為了要方便後續開發，這個轉換函式會輸出成一個物件，內含 name, size, uid 和 raw (檔案原始 Blob)

interface UploadRawFile extends File {
  uid: string
}

interface UploadFile {
  name: string,
  size: string,
  uid: number,
  raw: UploadRawFile
}

const convertFileToUploadFile = (file: File):UploadFile=>{
  const formattedFile = new File([file], file.name, { type: file.type }) as UploadRawFile
  formattedFile.uid = new Date().valueOf()
  const result = {
    name: file.name,
    size: file.size,
    uid: new Date().valueOf(),
    raw: formattedFile
  }
  return result
}