昨天我們看完了 type，今天接著講 helper

Helper

Helper，全名「Helper Function」輔助函數
我們也在前面提到

在開發的過程中，有時候我們可能會經常地重複使用某個函數
這時候我們可以將其抽取成一個 helper function，方便重複使用管理

在 Helpers 裡面分別有三個檔案

• index
• translation
• apollo

Apollo 的部分因為沒有被引用，這邊就省略不講

Translation 的話則留到 locales 本地話的部分再來討論

這邊主要我們看「index」的部分

uploadFile

在專案會有許多地方使用，下載檔案的功能
我來看一下他是怎麼實作的

export const uploadFile = async (
  key: string,
  file: File | null,
  authToken: string | null,
  config?: AxiosRequestConfig,
) => {
  let signedUrl = ''
  file &&
    (await axios
      .post(
        `${process.env.REACT_APP_API_BASE_ROOT}/sys/sign-url`,
        {
          operation: 'putObject',
          params: {
            Key: key,
            ContentType: file.type,
          },
        },
        {
          headers: { authorization: `Bearer ${authToken}` },
        },
      )
      .then(res => {
        signedUrl = res.data.result
        return res.data.result
      })
      .then(url => {
        const { query } = queryString.parseUrl(url)
        return axios.put<{ status: number; data: string }>(url, file, {
          ...config,
          headers: {
            ...query,
            'Content-Type': file.type,
          },
        })
      }))
  return signedUrl
}

參數

首先他會傳入四個參數

• key
  你要上傳到 S3 的路徑
  以上傳大頭像為例

`avatars/${appId}/${memberId}/${avatarId}`

它是放入 avatars 的資料夾
並以 appId 和 memberId 作為與其他 App 和 使用者的區隔
最後的「avatarId」，則是避免覆蓋到已經上傳的大頭照

• file
  上傳的檔案
• authToken
  傳入會員的 Auth Token
• config
  Axios 的設定檔，可以自定義 Axios 的設定

實作

首先，先宣告「signedUrl」這個參數，用於最後回傳
判斷 file 是否為空，當 file 為空時，則不進行上傳的動作
再來向後端發送 S3 的上傳的請求
後端會回傳 S3 上傳的網址給前端，也就是「signedUrl」
接著再拿著 signedUrl 進行檔案的上傳
最後 return signedUrl 結束

明天我們會繼續看到其他 helper function