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

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

新規登録して質問してみよう
ただいま回答率
85.46%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Ruby on Rails 6

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

Q&A

0回答

506閲覧

AngularでUploadした画像データをRails(carrierwave)で受け取る。

I_am_

総合スコア23

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Ruby on Rails 6

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

0グッド

0クリップ

投稿2021/07/27 14:36

編集2021/07/27 14:59

前提・実現したいこと

AngularでUploadした画像データをRails(carrierwave)で受け取りたいです。
Paramsがうまく扱えなくて適切にデータを操作できないです。

発生している問題

以下のようなパラメータが流れてきます。
こちらをRailsで受ける方法がわからないです。

Parameters: {"{\"nickname\":\"cat2\",\"avatar\":\"C:\\fakepath\\sample7.png\",\"avatarSrc\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAACTCAMAAADSiocKAAACWFBMVEUAAAAJCQkXFhTFxcHW0863tbDKx8KNi4bNycRycW/U0MrKycZgXVrQzchaU03a2tmwrqspJyS8urUfGxm4t7TQ0M3PzMPJxb2enJk7Nz

Rails部分

controller部分

def create newUser = User.new(user_params) if newUser.save render json: { status: 'SUCCESS', data: newUser } else render json: { status: 'ERROR', data: newUser.errors } end end def user_params params.permit( :nickname, :avatar, :avatarSrc) end
class User < ApplicationRecord mount_base64_uploader :avatarSrc, AvatarUploader end

以上のように簡単に設定をしています。

Angular部分

this.userForm = this.FormBuilde.group({ nickname: ['', Validators.required], avatar: [''], ←file avatarSrc: [''] }) onImageChange(e) { this.judgimg = false; const reader = new FileReader(); if(e.target.files && e.target.files.length) { const [file] = e.target.files; reader.readAsDataURL(file); reader.onload = () => { this.imgFile = reader.result as string; this.userForm.patchValue({ //avatar: reader.result avatarSrc: reader.result }); console.log(this.judgimg) }; } }

困っていること。

1 ↓チュートリアルにあるコードで送信されるデータとFormBuildeで作成されて送信されるデータになんの違いがあるのか?

<div class="field"> <%= form.label :avatar %> <%= form.file_field :avatar %> </div>

FormBuildeがどのような構造でPOSTしているか分かっていない。
FormBuildeのPOSTはJsonと言うこと?

2
Railsではどのようにこのパラメータを受け取ればいいのか?
(Controllerでは本質的にJsonやFormdataをどのように扱っているのか)

3
carrierwaveはそもそもParamをどのように解釈してUPloadしているのか?

<%= form.file_field :avatar %>
"avatarSrc":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
↑この2つをcarrierwaveやcontrollerはどう解釈しているのかわからない。

以上の観点がわからないです。
何かわかることがあれば教えていただきたいです。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問