はじめに アカウントにアイコン機能（プロフィール画像を表示させるもの）を作ろうとしたときに少しハマったので この記事で説明すること フロントエンド側 ・画像の選択 ・選択した画像をfetchのPOSTメソッドで送る バックエンド側 ・送られてきた画像を受け取る ・画像をローカルに保存する ・画像のパスをアカウントと紐づけする フロントエンド側 画像の選択 icon.tsx const [view, setview] = useState<string>(); const [iconData, setIconData] = useState<FormData>(); const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setview(window.URL.createObjectURL(e.target.files[0])) const image = new FormData() image.append("file", e.target.files[0]) setIconData(image) console.log("ターゲットファイルの中身",e.target.files[0]) }; <Input name="file" type='file' accept="image/*" onChange={onFileInputChange} /> "Input type='file' accept="image/*"で、画像を選択できます。 setIconDataで選択した画像をiconDataに入れています。 選択した画像をfetchのPOSTメソッドで送る icon.tsx const options: RequestInit = { mode: "cors", method: "POST", headers: { "Content-Type": "multipart/form-data", }, // JSON形式のデータのヘッダー credentials: 'include', body: iconData, } delete options.headers["Content-Type"]; fetch("http://localhost:8080/seticon", options) .then((res) => res.blob()) .then((data) => { setPosts(data); console.log("返ってきたデータ",data) }) 選択した画像をPOSTメソッドで送っています。 cookieにユーザー情報を埋め込んでいるので、credentialsでcookieも送ります。 バックエンド側 送られてきた画像を受け取る 画像をローカルに保存する 画像のパスをアカウントと紐づけする フレームワークにgorm,Echoを使っています。 icon.go func SetIcon(c echo.Context, db *gorm.DB) error { icon, err := c.FormFile("file") //送られてきた画像を受け取る if err != nil { fmt.Printf("ファイルが読み込めません\n") return c.JSON(http.StatusBadRequest, icon) } src, err := icon.Open() //io.Readerに変換 if err != nil { fmt.Printf("ファイルをioに変換できませんでした\n") return c.JSON(http.StatusBadRequest, "ファイルをioに変換できませんでした") } defer src.Close() iconModel := strings.Split(icon.Filename, ".") iconName := iconModel[0] extension := iconModel[1] dst, err := os.Create(fmt.Sprintf("%s_out.%s\n", iconName, extension)) //新しいファイルを作り、名前を決める if err != nil { fmt.Printf("ファイルが作れませんでした\n") return c.JSON(http.StatusBadRequest, "ファイルが作れませんでした") } defer dst.Close() if _, err = io.Copy(dst, src); err != nil { //ファイルの内容をコピー fmt.Printf("コピーできませんでした\n") return c.JSON(http.StatusBadRequest, "コピーできませんでした") } //ここまでが画像をローカルフォルダに保存する行程、ここからがuserのiconに画像データを入れる email, err := ReadCookieReturnEMail(c)//cookieからユーザーのemailを取得 if err != nil { fmt.Printf("クッキー読み取りに失敗しました\n") return c.JSON(http.StatusBadRequest, nil) } user := new(domain.User) if err := db.First(&user, "e_mail=?", email).Error; err != nil { return c.JSON(http.StatusBadRequest, nil) } db.Model(&user).Update("icon", dst.Name())//userの中のiconに画像のパスを入れている。 fmt.Printf("正常に終了しました\n" + dst.Name()) return c.File(user.Icon) } で、送られてきた画像を取得し、ローカルに保存し、画像のパスをアカウントと紐づけします。 おわりに ここまで見てくださってありがとうございました！何か間違い等あればコメント等で教えてくださると幸いです。