バックエンドをrails、フロントエンドはvueを使ってDBに保存したいのですが、どうしても出来なくてとても困っています、、、carrierwaveを使っているのですがどうやればいいのでしょうか?
microposts_controller.rb
class Api::V1::MicropostsController < ApplicationController rescue_from ActiveRecord::RecordNotFound do |exception| render json: { error: '404 not found' }, status: 404 end def new end def create micropost = current_user.microposts.build(micropost_params) if micropost.save render json: micropost, status: :created else render json: { errors: micropost.errors.full_messages }, status: :unprocessable_entity end end private def micropost_params params.require(:micropost).permit(:content, :picture) end end
micropost.rb
class Micropost < ApplicationRecord belongs_to :user default_scope -> { order(created_at: :desc) } mount_uploader :picture, PictureUploader validates :user_id, presence: true validates :content, presence: true, length: { maximum: 140 } mount_uploader :picture, ImageUploader end
app.vue
<template> <div id="app" class="container"> <form @submit.prevent="createMicroposts"> <div v-if="errors.length != 0"> <ul v-for="e in errors" :key="e"> <li> <font color="red">{{ e }}</font> </li> </ul> </div> <div> <label>content</label> <input v-model="microposts.content" type="text" /> </div> <div class="input-item"> <label class="input-item__label"> 画像を選択 <input type="file" @change="onFileChange" /> </label> </div> <button type="submit">Commit</button> </form> </div> </template> <script> import axios from "axios"; export default { data: function() { return { microposts: { content: "", picture: "", }, errors: "" }; }, methods: { onFileChange(e) { const files = e.target.files || e.dataTransfer.files; this.picture = files; }, createMicroposts: function() { axios .post("/api/v1/microposts", this.microposts) .then(response => { console.log(this.microposts) let e = response.data; this.$router.push({ name: "MicropostPage", params: { id: e.id } }); }) .catch(error => { console.error(error); if (error.response.data && error.response.data.errors) { this.errors = error.response.data.errors; } }); } } }; </script> <style scoped> .container { width: 935px; } p { font-size: 2em; text-align: center; } </style>
色々調べているのですが全く解決法がみつからないです、dbには画像以外しっかり保存してくれてるんですけど、画像だけがどうしても空になってしまいます。
些細なヒントでも構いませんので助けてください。
あなたの回答
tips
プレビュー