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

1 min読了の目安(約1400字TECH技術記事

プログラミングスクール卒業後に、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

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に送信する