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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails 6

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

Q&A

0回答

1114閲覧

FormDataで画像ファイルをPOSTしたときに、FormDataが空になり画像ファイルが送れない。

liu_000

総合スコア0

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails 6

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

1グッド

2クリップ

投稿2022/05/12 14:48

前提

フロントエンドにNuxt.js、バックエンドにRuby On Rails APIモードで簡単なCRUDを作成しています。画像投稿機能を実装していますが、フロントエンドからバックエンドに画像をPOSTしたときにFormDataが空になり画像が送れず困っています。

実現したいこと

FormDataが空にならず画像ファイルをバックエンドに送りたいです。

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

フロントエンドでFormDataを使用し、imageをappendさせバックエンドにPOSTしているのですが、POST実行時にバックエンド側で下記のエラーメッセージが表示されています。

Started POST "/v1/todos" for ::1 at 2022-05-12 23:27:27 +0900 Processing by V1::TodosController#create as HTML Parameters: {"todo"=>{"title"=>"c", "user_id"=>7, "image"=>{}}, "formData"=>{}, "config"=>{"headders"=>{"content-type"=>"multipart/form-data"}}} Unpermitted parameter: :image TRANSACTION (0.1ms) begin transaction ↳ app/controllers/v1/todos_controller.rb:9:in `create' User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 7], ["LIMIT", 1]] ↳ app/controllers/v1/todos_controller.rb:9:in `create' Todo Create (1.1ms) INSERT INTO "todos" ("title", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["title", "c"], ["user_id", 7], ["created_at", "2022-05-12 14:27:27.805642"], ["updated_at", "2022-05-12 14:27:27.805642"]] ↳ app/controllers/v1/todos_controller.rb:9:in `create' TRANSACTION (1.1ms) commit transaction ↳ app/controllers/v1/todos_controller.rb:9:in `create' [active_model_serializers] Rendered TodoSerializer with ActiveModelSerializers::Adapter::Attributes (1.04ms) Completed 200 OK in 16ms (Views: 1.8ms | ActiveRecord: 2.6ms | Allocations: 3770)

該当のソースコード

Ruby(/app/controllers/todos_contorller.rb)

1module V1 2 class TodosController < ApplicationController 3    ・・・ 4 def create 5 todo = Todo.create!(todo_params) 6 if todo.save 7 render json: todo 8 else 9 render json: todo.errors 10 end 11 end 12 13 def destroy 14 todo = Todo.find(params[:id]) 15 render json: todo if todo.destroy 16 end 17 18 private 19 20 def todo_params 21 params.require(:todo).permit(:title, :user_id, :image) 22 end 23 end 24end

Nuxt(/pages/index.vue)

1<template> 2 <AddTodo @submit="addTodo" /> 3 </div> 4</template> 5 6<script> 7import AddTodo from '~/components/AddTodo' 8import axios from '~/plugins/axios' 9export default { 10 compoponents: { 11 AddTodo, 12 }, 13 data () { 14 return { 15 todos: [] 16 } 17 }, 18 methods: { 19 async addTodo(todo, formData, config) { 20 const { data } = await axios.post('/v1/todos', { todo, formData, config }) 21 this.$store.dispatch('auth/setUser', { 22 ...this.user, 23 todos: [...this.user.todos, data] 24 }) 25 } 26 }, 27 fetch({ 28 store, 29 redirect 30 }) { 31 store.watch( 32 state => state.auth.currentUser, 33 (newUser, oldUser) => { 34 if (!newUser) { 35 return redirect('/login') 36 } 37 } 38 ) 39 } 40} 41</script>

Nuxt(/components/AddTodo.vue)

1<template> 2 <v-form> 3 <v-container> 4 <v-row> 5 <v-col 6 cols="12" 7 md="4" 8 > 9 <v-text-field 10 v-model="title" 11 counter="10" 12 label="todo" 13 required 14 /> 15 <div> 16 <v-file-input 17 accept="image/*" 18 v-model="addImage" 19 @change="setImage" 20 prepend-icon="mdi-camera" 21 /> 22 </div> 23 </v-col> 24 <v-col 25 cols="12" 26 md="4" 27 > 28 <v-btn 29 @click="handleSubmit" 30 > 31 作成 32 </v-btn> 33 </v-col> 34 </v-row> 35 </v-container> 36 </v-form> 37</template> 38 39<script> 40export default { 41 data () { 42 return { 43 title: '', 44 addImage: '' 45 } 46 }, 47 computed: { 48 user() { 49 return this.$store.state.auth.currentUser 50 } 51 }, 52 methods: { 53 setImage(file) { 54 this.addImage = file 55 if (file !== undefined && file !== null){ 56 if (file.name.lastIndexOf(".") <= 0) { 57 return 58 } 59 const fr = new FileReader() 60 fr.readAsDataURL(file) 61 fr.addEventListener("load", () => { 62 this.input_Image = fr.result 63 }) 64 } else { 65 this.input_Image = null 66 } 67 }, 68 handleSubmit() { 69 const formData = new FormData() 70 formData.append('post[image]', this.addImage) 71 const config = { 72 headders: { 73 'content-type': 'multipart/form-data' 74 } 75 } 76 const todo = { 77 title: this.title, 78 user_id: this.user.id, 79 image: this.addImage 80 } 81 this.$emit('submit', todo, formData, config) 82 this.title = '' 83 } 84 } 85} 86</script>

試したこと

FormDataにappendするときのキーを'image' から 'post[image]'に変えてみましたが症状は変わりませんでした。
ご助言いただきたいです。
よろしくお願いします。

補足情報(FW/ツールのバージョンなど)

バックエンド:Ruby on Rails 6.1.5
フロントエンド:Nust.js 2.15.8

shinoharat👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問