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

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

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

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

Nuxt.js

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

Q&A

1回答

2083閲覧

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

html-man

総合スコア18

Vue.js

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

Nuxt.js

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

0グッド

0クリップ

投稿2022/11/08 18:20

編集2022/11/09 10:21

前提

  • 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"

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

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

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

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

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

guest

回答1

0

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

投稿2022/11/08 22:23

maisumakun

総合スコア145121

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

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

html-man

2022/11/09 01:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問