ホームページ ウェブフロントエンド jsチュートリアル axios はポストリクエストを送信し、イメージタイプフォームデータメソッドを送信します

axios はポストリクエストを送信し、イメージタイプフォームデータメソッドを送信します

May 29, 2018 pm 05:26 PM
axios post 提出する

以下に、axios で投稿リクエストを送信し、イメージ タイプのフォーム データを送信する方法に関する記事を共有します。これは非常に参考になるので、皆様のお役に立てれば幸いです。

ドーム

<input type="file" @change="upload" ref="upload">
ログイン後にコピー

インターフェース

const userUploadAtt = (File,config) => axios.post("接口",File,config)
ログイン後にコピー

プロセスデータ

let input = this.$refs.upload 
创建一个空的FormData对象 
let data = new FormData();
使用FormData.append来添加键/值对到表单里面;
data.append(&#39;file&#39;, input.files[0]);
upload(){
 userUploadAtt(data,{headers: {&#39;Content-Type&#39;: &#39;multipart/form-data&#39;}}).then((response)=>{
  this.headPhoto = response.data[0].msg.url;
 }).catch(()=>{
 })
}
ログイン後にコピー

注:

の場合

axios.defaults.headers.post[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded;charset=UTF-8&#39;
post请求时候表单上传不需要引入qs.stringify()
ログイン後にコピー

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

vuejsのv-ifとv-showの違いとv-showが動作しない問題について

vueでiviewカスタム検証キーワード入力ボックスを使用する際の問題と解決策

Vue で v-show に式を追加する際の問題 (表示するかどうかの決定)

以上がaxios はポストリクエストを送信し、イメージタイプフォームデータメソッドを送信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue アプリケーションで axios を使用しているときに「Uncaught (in Promise) Error: Request failed with status code 500」が発生した場合はどうすればよいですか? Vue アプリケーションで axios を使用しているときに「Uncaught (in Promise) Error: Request failed with status code 500」が発生した場合はどうすればよいですか? Jun 24, 2023 pm 05:33 PM

Vue アプリケーションで axios を使用するのは非常に一般的です。axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP クライアントです。開発プロセス中に、「Uncaught(inpromise)Error: Requestfailedwithstatuscode500」というエラー メッセージが表示されることがありますが、開発者にとって、このエラー メッセージは理解および解決が難しい場合があります。この記事ではこれについて説明します

Vue アプリケーションで axios を使用するときに「TypeError: Failed to fetch」が発生した場合はどうすればよいですか? Vue アプリケーションで axios を使用するときに「TypeError: Failed to fetch」が発生した場合はどうすればよいですか? Jun 24, 2023 pm 11:03 PM

最近、Vue アプリケーションの開発中に、「TypeError: Failedtofetch」エラー メッセージという一般的な問題に遭遇しました。この問題は、axios を使用して HTTP リクエストを作成し、バックエンド サーバーがリクエストに正しく応答しない場合に発生します。このエラー メッセージは通常、ネットワーク上の理由またはサーバーが応答していないことが原因で、リクエストがサーバーに到達できないことを示します。このエラーメッセージが表示された後はどうすればよいでしょうか?以下にいくつかの回避策を示します。

Vue でのデータ リクエストの選択: Axios または Fetch? Vue でのデータ リクエストの選択: Axios または Fetch? Jul 17, 2023 pm 06:30 PM

Vue でのデータ リクエストの選択: AxiosorFetch? Vue 開発では、データ リクエストの処理は非常に一般的なタスクです。データリクエストにどのツールを使用するかを選択することは、考慮する必要がある問題です。 Vue で最も一般的なツールは、Axios と Fetch の 2 つです。この記事では、両方のツールの長所と短所を比較し、選択に役立つサンプル コードをいくつか示します。 Axios は、ブラウザおよび Node.js で動作する Promise ベースの HTTP クライアントです。

Vue アプリケーションで axios を使用するときに発生する「エラー: ネットワーク エラー」の問題を解決するにはどうすればよいですか? Vue アプリケーションで axios を使用するときに発生する「エラー: ネットワーク エラー」の問題を解決するにはどうすればよいですか? Jun 25, 2023 am 08:27 AM

Vue アプリケーションで axios を使用するときに発生する「エラー: NetworkError」の問題を解決するにはどうすればよいですか? Vue アプリケーションの開発では axios を使って API リクエストをしたり、データを取得したりすることが多いのですが、axios リクエストで「Error: NetworkError」が発生することがあります。まず、「Error:NetworkError」の意味を理解する必要があります。これは通常、ネットワーク接続が切断されていることを意味します。

Vue と Axios を効率的に活用してフロントエンド データのバッチ処理を実装する Vue と Axios を効率的に活用してフロントエンド データのバッチ処理を実装する Jul 17, 2023 pm 10:43 PM

Vue と Axios を効率的に活用して、フロントエンド データのバッチ処理を実装します。フロントエンド開発ではデータ処理が一般的なタスクです。大量のデータを処理する必要がある場合、効果的な方法がなければ、データの処理は非常に煩雑で非効率的になってしまいます。 Vue は優れたフロントエンド フレームワークであり、Axios は人気のあるネットワーク リクエスト ライブラリであり、連携してフロントエンド データのバッチ処理を実装できます。この記事では、Vue と Axios を効率的に使用してデータのバッチ処理を行う方法を詳しく紹介し、関連するコード例を示します。

Vue アプリケーションで axios を使用するときに「エラー: xxxms のタイムアウトを超えました」が発生した場合はどうすればよいですか? Vue アプリケーションで axios を使用するときに「エラー: xxxms のタイムアウトを超えました」が発生した場合はどうすればよいですか? Jun 24, 2023 pm 03:27 PM

Vue アプリケーションで axios を使用するときに「エラー: timeoutofxxxmsexceeded」が発生した場合はどうすればよいですか?インターネットの急速な発展に伴い、フロントエンド技術は常に更新され、改良が重ねられており、Vue は優れたフロントエンド フレームワークとして近年皆様に歓迎されています。 Vue アプリケーションでは、ネットワーク リクエストを行うために axios を使用する必要があることがよくありますが、「エラー: timeoutofxxxmsexceeded」というエラーが発生することがあります。

Vue アプリケーションで axios を使用するときに「TypeError: binding is not a function」が発生した場合はどうすればよいですか? Vue アプリケーションで axios を使用するときに「TypeError: binding is not a function」が発生した場合はどうすればよいですか? Jun 25, 2023 am 08:31 AM

Vue.js アプリケーションでは、axios を使用するのが非常に一般的です。 Axios は、非同期 HTTP リクエストを簡単に送信できる強力な HTTP リクエスト ライブラリです。ただし、axios を使用すると、いくつかのエラーが発生します。そのうちの 1 つは「TypeError:bindisnotafunction」です。このエラーは通常、axios バージョンが Vue.js と互換性がないことが原因で発生します。このエラーの解決策を見てみましょう。まず必要なのは、

Vue と Axios は非同期データリクエストの同期処理を実装します。 Vue と Axios は非同期データリクエストの同期処理を実装します。 Jul 17, 2023 am 10:13 AM

Vue と Axios は非同期データ リクエストの同期処理を実装します。 はじめに: 最新のフロントエンド開発では、ページが非同期データ リクエストを通じてデータを取得し、それを動的に表示する必要があるため、非同期処理は避けられない要件となっています。ただし、非同期データ要求によりコード ロジックが複雑になり、保守が困難になることがよくあります。 Vue フレームワークでは、Axios ライブラリを使用して非同期データ リクエストの同期処理を簡単に実装できるため、コードの可読性と保守性が向上します。 1. Vue の概要 Vue は軽量のフロントエンド フレームワークです。

See all articles