@katou02 (Meitoku)posted at 2022-09-13

複数モデルを同時保存(Rails API)

Q&A

Closed

やりたいこと

画像を添付して投稿すると、GirlテーブルとImageテーブルに同時にデータを保存できるようにしたい
名前(name)、詳細(text)、画像(image)を入力して投稿すると、Girlテーブルのnameとtextに入力した値が入り、imageテーブルのdetailに画像が入るという感じにしたいです
Rails(api)とNuxt.jsを使用しています
よろしくお願いします

こちらのRails+Nuxtバージョンをやりたいです

ソース&テーブル

Girlテーブル

id	name	text

Imageテーブル

id	detail

アソシエーション

girl.rb

class Girl < ApplicationRecord
  has_many :images
  accepts_nested_attributes_for :images
end

image.rb

class Image < ApplicationRecord
  belongs_to :girl
  mount_uploaders :image, ImageUploader
end

コントローラー

Girls.contoller

class Api::V1::GirlsController < ApplicationController

  def new
  end

  def create
    girl = Girl.create(girl_params)
    if girl.save
      render json: girl, status: :created
    else
      render json: { errors: girl.errors.keys.map { |key| [key, girl.errors.full_messages_for(key)]}.to_h, render: 'show.json.jbuilder' }, status: :unprocessable_entity
    end
  end
  
  private
  def girl_params
    params.permit(:name,:text,images_attributes: {image: []})
  end
end

投稿画面(New.vue)

<template>
  <div class="contens row mx-auto">
    <form>
      <v-text-field v-model="name" type="text" label="人"></v-text-field>
      <v-text-field v-model="text" type="text" label="詳細"></v-text-field>
      <v-file-input @change="setImage" label="画像" accept="image/png, image/jpeg, image/bmp"/>
    </form>
    <b-button @click="createGirl" type="submit" color="info" class="text-white mt-5 mb-5">投稿する</b-button>
  </div>
</template>

<script>
export default {
  data: ()=>{
    return {
      name: '',
      text: '',
      image: null,
      errors: '',
    }
  },
  methods: {
    createGirl() {
      let formData = new FormData();
      formData.append("name", this.name);
      formData.append("text", this.text);
      const config = {
        headers: {"content-type": "multipart/form-data",}
      };
      if (this.image !== null) {
        formData.append("image", this.image);
      }
      this.$axios
        .post('/api/v1/girls',formData,config)
        .then(response => {
        })
        .catch(error => {
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
    },
    setImage(e){
      this.image = e
    }
  }
}
</script>

<style>

</style>

エラー内容

画像を添付した後保存しようとすると、保存できずgirl_paramsの中身を見てみると下記のように表示され、パラメーターの中にimageが入っていませんでした

Unpermitted parameter: :image
#<ActionController::Parameters {"name"=>"test", "text"=>"test"} permitted: true>

試したこと

パラメーターを色々変更してみましたが結果は変わりませんでした

  def girl_params
    params.require(:girl).permit(:name,:text,images_attributes: {image: []})
  end

  def girl_params
    params.permit(:name,:text,images_attributes: {detail: []})
  end

Are you sure you want to delete the question?