formData で送信した画像が Null になってしまう。

Question

Nuxtサーバーから Rubyサーバーに、画像を送信（imageカラムにput）しようとしています。

put 自体は成功するのですが、レスポンスを見ると、image オブジェクトが null になっています。Docker のログにも image = NULL と表示されてしまいます。

どこで間違いをしてしまっているのでしょうか…？

back     | Started PUT "/api/v1/auth" for 172.18.0.1 at 2021-09-28 15:56:20 +0900
back     | Processing by Api::V1::Auth::RegistrationsController#update as JSON
back     |   Parameters: {"image"=>"/_nuxt/assets/images/img2222.jpg"}
back     |   User Load (1.7ms)  SELECT `users`.* FROM `users` WHERE `users`.`uid` = '[e-mail]' LIMIT 1
back     |   TRANSACTION (0.5ms)  BEGIN
back     |   User Update (1.7ms)  UPDATE `users` SET `users`.`image` = NULL, `users`.`updated_at` = '2021-09-28 06:56:20.943772' WHERE `users`.`id` = 1
back     |   TRANSACTION (8.0ms)  COMMIT
back     |   User Load (1.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
back     |   TRANSACTION (0.5ms)  BEGIN

フロントエンド（ポート8080）

<template>
  <div>
    <img width="100" :src=icon />
    <button @click="changeUserAvatar" type="submit">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: require('@/assets/images/img2222.jpg'),
    };
  },

  methods: {
    async changeUserAvatar() {
      const formData = new FormData();
      formData.append('image', this.icon);
      await this.$axios
        .put('api/v1/auth', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
}
</script>

バックエンド（ポート3000）

Gemfile

# image
gem 'carrierwave'
gem 'fog-aws'
gem 'mini_magick'

---

/back/app/controllers/api/v1/auth/registrations_controller.rb

# class Api::V1::Auth::RegistrationsController < ApplicationController
module Api
  module V1
    module Auth
      class RegistrationsController < DeviseTokenAuth::RegistrationsController
        private

        def sign_up_params
          params.permit(:email, :password, :password_confirmation, :image)
        end

        def account_update_params
          params.permit(:first_name, :last_name, :email, :password, :image)
        end
      end
    end
  end
end

---

/back/db/migrate/20210910042637_devise_token_auth_create_users.rb

Rails.application.routes.draw do
  devise_for :users

  namespace :api do
    namespace :v1, format: 'json' do
      mount_devise_token_auth_for 'User', at: 'auth', controllers: {
        registrations: 'api/v1/auth/registrations'
      }
      resources :users, only: %i[index show create update destroy]
    end
  end
end

内容：gem 'devise' を使用。エンドポイントは api/v1/auth。

---

back/config/initializers/carrierwave.rb

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  if Rails.env.production?
    config.cache_storage = :fog
    config.fog_directory = 's3-bucket-for-images'
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
      aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
      region: 'ap-northeast-1'
    }
  else
    config.asset_host = 'http://localhost:3000'
    config.cache_storage = :file
  end
end

内容：config.asset_host = 'http://localhost:3000' を指定

---

/back/config/environments/development.rb

<snip/>

  config.action_controller.asset_host = 'http://localhost:3000'

<snip/>

---

/back/app/uploaders/image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  if Rails.env.development?
    storage :file
  elsif Rails.env.test?
    storage :file
  else
    storage :fog
  end

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def default_url(*_args)
  end

  def extension_allowlist
    %w[jpg jpeg gif png]
  end

  def filename
    original_filename
  end
end

---

/back/db/migrate/20210910042637_devise_token_auth_create_users.rb

<snip/>

      ## User Info
      t.string :first_name
      t.string :last_name
      t.string :image
      t.string :email

<snip/>

内容：imageカラムを追加

Comments

[maisumakun]

サーバサイドのコードはどのようなものでしょうか？

[kento_ar]

maisumakun 様
コメントをくださりありがとうございます。
Ruby サーバの情報を付加いたしました。

[kento_ar]

自己解決しました。Nuxt 側で input する際に、model に画像データをバインドさせていないことが原因でした。

Answer 1

自己解決しました。Nuxt 側で input する際に、model に画像データをバインドさせていないことが原因でした。