質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Reactからaxiosを用いて、Railsに画像を送信したい

yuki178504
yuki178504

総合スコア3

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

323閲覧

投稿2022/11/07 20:51

前提

現在、ReactとRailsを用いて、アプリケーションを作成しています。
Rails側で CarrierWaveを用いて、画像のアップロード機能を作成しています。
その際に、Rails側は、curlコマンドで正常に画像のアップロードができることを確認できました。
Reactで画像のアップロード機能を実装中に下記のコードのように実装していたのですが、データの送信は正常にできるものの、送信されたデータを見てみると、データがnullになっています。

実現したいこと

Reactで送信したデータを正常にRails側のDBに入るようにしたいです。

発生している問題・エラーメッセージ

下記のimage: object
url: null
の箇所が本来画像データが入る場所なのですが、送信はできても、データ自体が入っていない状態です。

イメージ説明

該当のソースコード

下記が現在のソースコードです。
下記のconst { token } = useContext(AuthContext);
の箇所は、別のファイルからトークン情報を取得して、付与しています。
react-hook-formを使用しています。

react

1import newComicForm from "../../../css/ui/newComicForm.module.css" 2import { useForm } from 'react-hook-form'; 3import comicNewGenreJson from "../../../json/comicNewGenre.json"; 4import { useContext } from "react"; 5import axios from "axios"; 6import { AuthContext } from "../../../providers/AuthGuard"; 7 8const ComicNew = () => { 9 const { token } = useContext(AuthContext); 10 11 const { handleSubmit, register, formState: { errors } } = useForm({ 12 criteriaMode: "all" 13 }); 14 15 const onSubmit = async (data) => { 16 console.log(data) 17 const createFormData = () => { 18 const formData = new FormData(); 19 formData.append("image.url", data.image.url[0]); 20 formData.append("title", data.title); 21 formData.append("genre", data.genre); 22 return formData; 23 }; 24 25 const datai = createFormData(); 26 27 const res = await axios.post(`${process.env.REACT_APP_DEV_API_URL}/user/comics`, datai, { 28 headers: { 29 Authorization: `Bearer ${token}`, 30 'Content-Type': 'multipart/form-data', 31 }, 32 }) 33 .catch((error) => { 34 console.error(error.res.data); 35 }); 36 alert(JSON.stringify(`${res.message}, status: ${res.status}`)); 37 console.log(data) 38 }; 39 40 return ( 41 <div className={newComicForm.wrapper}> 42 <form onSubmit={handleSubmit(onSubmit)} className={newComicForm.form}> 43 <div className={newComicForm["form-text"]}> 44 <div className={newComicForm["form-label"]}>漫画のタイトル</div> 45 { errors.title && 46 <div className={newComicForm.errors}>【!漫画のタイトルが空欄です】</div> 47 } 48 <input 49 className={newComicForm["form-input"]} 50 placeholder="漫画のタイトルを入力してください" 51 name="title" 52 {...register("title")} 53 /> 54 </div> 55 <div className={newComicForm["form-text"]}> 56 <div className={newComicForm["form-label"]}>漫画のジャンル</div> 57 { errors.genre && 58 <div className={newComicForm.errors}>【!漫画のジャンルを選択してください】</div> 59 } 60 <select 61 className={newComicForm["form-input"]} 62 name="genre" 63 {...register("genre")} 64 > 65 <option></option> 66 {comicNewGenreJson.map((genre, index) => 67 <option key={index} >{ genre.genre }</option> 68 )} 69 </select> 70 </div> 71 <div className={newComicForm["form-text"]}> 72 <div className={newComicForm["form-label"]}>漫画の画像</div> 73 <input 74 className={newComicForm["form-input"]} 75 type="file" 76 accept="image/*" 77 {...register("image.url")} 78 /> 79 </div> 80 <div className={newComicForm["form-text"]}> 81 <button className={newComicForm["form-submit"]} type="submit">この内容で登録する</button> 82 </div> 83 </form> 84 </div> 85 ); 86}; 87 88export default ComicNew;

試したこと

送信自体は正常にできているのでエラーも出ず、現状何が問題なのかが分からない状態です。
初心者で分かりにくい箇所があるかと思いますが、回答のほどいただけたら幸いです。
不明な点があれば、ご指摘いただければ幸いです。
よろしくお願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

react

1const onSubmit = async (data) => { 2 console.log(data) 3 const createFormData = () => { 4 const formData = new FormData(); 5 formData.append("image.url", data.image.url[0]); 6 formData.append("title", data.title); 7 formData.append("genre", data.genre); 8 return formData; 9 }; 10

上記のコードの部分を下記のように記述したら正常にデータが送られるようになりました。

react

1formData.append("image", data.image[0]);

投稿2022/11/08 01:20

yuki178504

総合スコア3

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。