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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

受付中

Vue.jsのaxiosでのPOSTリクエストが400になってしまう

html-man
html-man

総合スコア18

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

1回答

0グッド

0クリップ

431閲覧

投稿2022/11/08 18:20

編集2022/11/08 18:35

前提

  • Vue.js / Nuxt.js でWebアプリを開発しています
  • 現在、axiosを利用して画像アップロード機能の開発をしている際にエラーに出くわしました
  • 1時間ほど調べて色々試しましたが上手くいかなかったのでご意見をお聞かせください
  • 私のスキル程度は本業ではなく趣味でプログラミングに関わるようになって半年ほどの者です
  • axiosに慣れていません

実現したいこと

サーバーURLにPOSTリクエストをおこない、画像ファイルをアップロードしたい

発生している問題・エラーメッセージ

以下のエラーメッセージが表示され、サーバー側にファイルをアップロードできない

Error: Request failed with status code 400

該当のソースコード

JavaScript

1 const formData = new FormData(); 2 formData.append("image", this.inputImage); 3 const config = { 4 method: "post", 5 url: this.uploadURL, 6 headers: { 7 "Content-Type": "multipart/form-data", 8 }, 9 }; 10 11 this.$axios(config) 12 .then(function (res) { 13 console.log(res); 14 response.json(res.data); 15 }) 16 .catch(function (err) { 17 console.log(err); //このエラーが出ます 18 }); 19 20// this.inputImageの内容はblobになっていて、 21// "http://localhost/hogehoge"のような文字列です。

試したこと

試したこと1. formData周り

上記コードのformDataの "image"を"file"に変えてみたが、効果なし

試したこと2. HTMLフォームでの検証

以下のような単純なHTMLフォーム形式では正常にアップロードが完了できました。

html

1<form 2 action="URL_FOR_UPLOAD" 3 method="post" 4 enctype="multipart/form-data" 5> 6 <input type="file" name="file" /> 7 <input type="submit" /> 8</form>

補足情報(FW/ツールのバージョンなど)

  • アップロード先のURLはCloudflare ImagesのワンタイムURLというもの(ドキュメントはこちら
  • 各種バージョン(Vue2.7.10, Nuxt2.15.8)

以上です。
その他不十分な点などありましたらご質問いただけると助かります。

追記

errorをerror.responseとすることで詳細のエラー内容がわかりました。以下の通りですが、私ではこれでもどうしたらよいか全くわかりません。

code: "101" message: "content-type is not supported"

以下のような質問にはグッドを送りましょう

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

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

回答1

0

axiosの方のコードで、formData を送信に使っている様子がないのですが、そこは確認しましたか?

投稿2022/11/08 22:23

maisumakun

総合スコア141554

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

html-man

2022/11/09 01:21

ありがとうございます。そうですね。なぜか全く気がつかなかったです。 そちら修正して試してみます。

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。