railsでAPIを使ったアップローダーのpostエラー

Question

###やりたいこと
下記の記事を参考にしたVue + Rails + CarrierwaveでS3へのダイレクトアップロード
Vue + Rails + CarrierwaveでS3へのダイレクトアップロードをする

何が起きたか

記事の通りに行ったところ下記のようなエラー文が返ってきてしまいました。

TypeError: Cannot read property 'post' of undefined

デバッグの方法などが分からず、エラー箇所が特定できません。。。

関連していると思われるコード

※基本的に記事内のコードを丸々コピーしていますが念のため記載しております。

app/script/test.vue

<template>
  <input
  class="custom-file-input"
  type="file"
  name="products[image]"
  ref="productImage"
  >
  <div class="form-group">
  <input
  type="submit"
  name="commit"
  value="アップロード"
  class="btn btn-success submit"
  data-disable-with="アップロード"
  @click="postProduct"
  >
  </div>
</template>

<script>
import axios from "axios";

axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

export default {
  data: function() {
    return {
        value: '',
        presignedUrl: '',
        uploadFile: {},
        productId: ''
    };
  },
  methods: {
    async postProduct (e) {
      try {
        this.uploadFile = this.$refs.productImage.files[0]
        const postingUrl = `/api/v1/products`
        const payload = {
          product: {
            image: this.uploadFile.name
          }
        }
        const res = await this.$axios.post(postingUrl, payload)
        this.presignedUrl = res.data.image_url
        this.productId = res.data.id
        this.fileUpload()
      } catch(e) {
        console.error(e)
      }
    },

    async fileUpload () {
      try {
        const config = {
          headers: {
            'content-type': 'multipart/form-data'
          }
        }
        // formDataは使わずファイルをそのままアップロードする
        await this.$axios.put(this.presignedUrl, this.uploadFile, config)
      } catch(e) {
        console.error(e)
      }
    }

  }
};
</script>

config/initializers/aws.rb
※バケット名やKEYは自分の発行したものを入れております

unless Rails.env.test? || Rails.env.development?
  credentials = Aws::Credentials.new(
    ENV["S3_ACCESS_KEY_ID"],
    ENV["S3_SECRET_ACCESS_KEY"]
  )

  s3_resource = Aws::S3::Resource.new(region: 'bucketのリージョン名', credentials: credentials)
  S3_BUCKET = s3_resource.bucket('S3のバケット名')
end

app/uploaders/application_uploader.rb

class ApplicationUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  def presigned_url(file_name = nil)
    file_name ||= self.model.attributes[mounted_as.to_s]
    object = S3_BUCKET.object([store_dir, file_name].join('/'))
    # 署名付きリンクは10分で失効(デフォルトでは15分)
    object.presigned_url(:put, expires_in: 10.minutes.to_i, acl: 'private')
  end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end
end

app/controllers/api/v1/products_controller.rb

class Api::V1::ProductsController < ApplicationController
    def create
        @products = Image.new(products_params)
        # 先に@productsのオブジェクトを作成し、後からファイルカラムを更新する
        if @products.save!
        @products.update_column('image', products_params[:image])
            render json: {
            id: @products.id,
            image_url: @products.image.presigned_url
            }
        else
        render json: @products.errors, status: :unprocessable_entity
        end
    end
end

Answer 1

axiosがすでに使えるのに変数的な扱いをしてしまっているからこそ出ていたエラーでした。

const res = await this.$axios.post(postingUrl, payload)
await this.$axios.put(this.presignedUrl, this.uploadFile, config)

この二つのコードを

const res = await axios.post(postingUrl, payload)
await axios.put(this.presignedUrl, this.uploadFile, config)

このように変える必要がありました。