前提・実現したいこと
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はどう解釈しているのかわからない。
以上の観点がわからないです。
何かわかることがあれば教えていただきたいです。
あなたの回答
tips
プレビュー