【CarrierWave】Nuxt.js+Railsで画像を保存させたい時にやったこと
プログラミングスクール卒業後に、RailsのAPIモードで開発をしたいと思い、フロントにNuxt.jsを使って勉強しながら実装している。今回はcarrierwaveを使って画像を保存することができたので忘れないように書いておく。ちなみにaxiosやcarrierwaveの導入の説明は省く。
必要なもの
axiosとcors(API通信)
carrierwave(画像）
実装
Rails
モデル
carrierwaveを導入し、uploaderを作成後
postモデルのimageカラムにImageUploaderを指定する
uploader名はImageとした
mount_uploader :image, ImageUploader
コントローラ
createが成功なのか失敗なのかによって返すJSONを条件分岐する。
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を使用
<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する
<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に送信する
Author And Source
この問題について(【CarrierWave】Nuxt.js+Railsで画像を保存させたい時にやったこと), 我々は、より多くの情報をここで見つけました https://zenn.dev/cool_boxing/articles/e3add3ab8c7a10165052著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol