質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

458閲覧

rails&vue&postgresqlでのファイルの扱い

mika_yamano

総合スコア3

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/05/04 06:08

バックエンドを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には画像以外しっかり保存してくれてるんですけど、画像だけがどうしても空になってしまいます。
些細なヒントでも構いませんので助けてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問