【CarrierWave】Nuxt.js+Railsで画像を保存させたい時にやったこと

プログラミングスクール卒業後に、RailsのAPIモードで開発をしたいと思い、フロントにNuxt.jsを使って勉強しながら実装している。今回はcarrierwaveを使って画像を保存することができたので忘れないように書いておく。ちなみにaxiosやcarrierwaveの導入の説明は省く。

必要なもの

axiosとcors(API通信)
carrierwave(画像）

実装

Rails

モデル

carrierwaveを導入し、uploaderを作成後
postモデルのimageカラムにImageUploaderを指定する
uploader名はImageとした

post.rb

mount_uploader :image, ImageUploader

コントローラ

createが成功なのか失敗なのかによって返すJSONを条件分岐する。

post_controller.rb

  def create
    @post = Post.new(post_params)
    if @post.save
      render json: @post
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end 
  
  

Nuxt

template

スタイリングにvuetifyを使用

post.vue

<template>
 <div>
  <v-file-input   
  <!-- ファイルが選択された時に"setImage"が発火するように記述 -->
   @change="setImage"
   label="画像"
   accept="image/png, image/jpeg, image/bmp"
  />
  <v-btn 
  <!-- 投稿ボタンイベント -->
   @click="createPost" 
  >
  投稿する
  </v-btn>
 </div>
</template>

script

ファイルが選択された時、setImageによってimageにファイルが格納される。
投稿ボタンが押された時、
1.createPostでFormdataを作りその中にimageを入れる。
2.content-type": "multipart/form-data"をheaderに入れる
3.axiosでpostする

post.vue

<script>
 export default {
  data(){
   return{
    image:""
   }
  },
  methods:{
   setImage(e){
    this.image = e;
   },
   createPost(){
    const formData = new FormData();
    formData.append("image", this.image);
    const config = {
     headers: {
      "content-type": "multipart/form-data",
     }
    };
    this.$axios.post("指定のURL("/api/v1/spots"など)",
     formData,config
    )
    // 成功時の処理
    .then(res => {
    })
    // 失敗時の処理
    .catch((error) => {
    })
   }
  }
 }
</script>

まとめ

file-inputに選択された画像ファイルをimageへ格納するイベントを作る
投稿ボタンで、formDataとheaderをaxiosでRailsに送信する