一般社団法人 全国個人事業主支援協会

COLUMN コラム

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

今の環境は、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)=>{
        // 通信が成功した時の処理
      })
}

 

参考:https://blog.katsubemakito.net/html5/fetch2

The following two tabs change content below.

内田 美樹

システムエンジニアをしています。 フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア