Fetchでファイルをアップロードする【React/TypeScript】

COLUMN コラム

2022年01月31日
Fetchでファイルをアップロードする【React/TypeScript】
- プログラマー
- システムエンジニア

仕事で「アイコンを変更する」という機能を実装した際にファイルのアップロードを書いたのでやり方をまとめておきます。

今の環境は、React/Next.jsでTypeScriptを使用しており、

独自のアイコン更新APIに画像情報と一緒にユーザーIDやセッションIDを渡す必要がありました。

const imageUpload = (
    imageFile: File,
    userID: string,
    sessionID: string
) => {

    // 送信データの準備
    const formData = new FormData();
    // ファイル内容を詰める
    formData.append("sessionID", sessionID);
    formData.append("userID", userID);
    formData.append("avatar", imageFile);

    // アップロードする
    const url = "https://example.com"
    fetch(url, {
      method: "POST",
      body: formData
    })
      .then((res)=>{
        // 通信が成功した時の処理
      })
}