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

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

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

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

Ruby on Rails 6

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

解決済

Vueから画像をアップロードしエンコードした画像をRailsに渡せない。

ssssyyyy
ssssyyyy

総合スコア16

Vue.js

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

Ruby on Rails 6

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

1回答

0リアクション

0クリップ

246閲覧

投稿2022/08/07 13:22

前提知識が低くて恐縮ですが、全く前に進めない状態となってしまった為、少しでもお気づきの点があれば、アドバイスやヒントを頂きたいです。
よろしくお願いいたします。

Vue2.7.2
Rails6.1.6

RailsとVueで画像やテキストを登録できるメモアプリ的なものを作っております。
画像以外のテキストのカラムは問題なく登録出来るのですが、画像の登録が出来ずに困っております。

以下のサイトを参考にして実装をしました。
Vue on RailsでActive Storageを使って画像を保存する

ruby

config/routes.rb Rails.application.routes.draw do namespace :api, format: 'json' do resources :designs end end

ruby

app/controllers/api/designs_controller.rb class Api::DesignsController < ApplicationController before_action :set_design, only: %i[show] skip_before_action :verify_authenticity_token def index @designs = Design.all end def show end def new @design = Design.new end def create @design = Design.new(design_params) if @design.save @design.nail_image = design_params[:images] render json: @design, status: :created else render json: @design.errors, status: :unprocessable_entity end end private def design_params params.require(:design).permit(:title, :description, :nail_part, :images) end def set_design @design = Design.find(params[:id]) end end

ruby

app/views/api/designs/index.json.jbuilder json.set! :designs do json.array! @designs do |design| json.extract! design, :id, :title, :description, :nail_part json.nail_image rails_blob_url(design.nail_image) if design.nail_image.attached? end end app/views/api/designs/show.json.jbuilder json.extract! @design, :id, :title, :description, :nail_part json.nail_image rails_blob_url(@design.nail_image) if @design.nail_image.attached?

seeds.rbで登録したデータは問題なく表示されています。

ruby

app/models/design.rb class Design < ApplicationRecord has_one_attached :nail_image attr_accessor :images def nail_image=(images) if images.present? prefix = images[/(image|application)(\/.*)(?=\;)/] type = prefix.sub(/(image|application)(\/)/, '') data = Base64.decode64(images.sub(/data:#{prefix};base64,/, '')) filename = "#{Time.zone.now.strftime('%Y%m%d%H%M%S%L')}.#{type}" File.open("#{Rails.root}/tmp/#{filename}", 'wb') do |f| f.write(data) end nail_image.detach if nail_image.attached? nail_image.attach(io: File.open("#{Rails.root}/tmp/#{filename}"), filename: filename) FileUtils.rm("#{Rails.root}/tmp/#{filename}") end end end

javascript

app/javascript/design-new.vue <template> <div> <h1>ネイルデザインを登録</h1> <lable>タイトル</lable><br> <input type="text" placeholder="入力してください" v-model="title"><br> ハンド<input type="radio" value="hand" v-model="nail_part"> フット<input type="radio" value="foot" v-model="nail_part"><br> <lable>調べた内容・メモ</lable><br> <textarea placeholder="説明" v-model="description"></textarea><br> <lable>画像</lable><br> <input type="file" ref="preview" @change="uploadFile"><br> <div v-if="url"> <img :src="url"> </div> <button @click="createDesign">ネイルデザインを登録</button> </div> </template> <script> import axios from 'axios' export default { data() { return { title: '', description: '', nail_part: '', images: '', url:'' } }, methods: { uploadFile(e){ // console.log(this.$refs.preview.files[0]) // console.log(e.target.files[0]) const image = e.target.files[0] const reader = new FileReader() this.url = URL.createObjectURL(image) reader.readAsDataURL(image) reader.onload = () => { this.images = reader.result } }, async createDesign() { const params = { title: this.title, description: this.description, nail_part : this.nail_part, images: this.images } await axios.post('/api/designs', params) .then(response => window.location.href ='/designs').catch(e => console.log(e)) } } } </script> <style> </style>

formDataを使用した書き方も参考サイトにあったので試してみたのですが、今度は、画像以外のカラムの登録が出来なくなりました。

ruby

app/javascript/design-new.vue methods: { async createDesign() { const params = { 'title': this.title, 'description': this.description, 'nail_part' : this.nail_part, 'images': this.images } const formData = new FormData() await Object.entries(params).forEach(([key, value]) => { formData.append(key, value) }) await axios.post('/api/designs', formData, { headers: { 'content-type': 'multipart/form-data' } }).then(response => window.location.href ='/designs').catch(e => console.log(e)) } }

エラー内容

Started POST "/api/designs" for ::1 at 2022-08-07 22:10:06 +0900 Processing by Api::DesignsController#create as JSON Parameters: {"title"=>"test", "description"=>"", "nail_part"=>"hand", "images"=>"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAEAC以下省略="} Completed 400 Bad Request in 1ms (Allocations: 630) ActionController::ParameterMissing (param is missing or the value is empty: design Did you mean? description action title images):

この場合、コントローラーの書き方を変えた方が良いのでしょうか?
どのように進めたら良いのかわからなくなってしまった為、少しでもお気づきの点があればご指摘をお願い致します。
お手数ですがご教示のほど、よろしくお願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Ruby on Rails 6

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