formData 形式タイプを使用してファイルをアップロードする Vue の例

formData 形式タイプを使用してファイルをアップロードする Vue の例

Vue では、一般的にフロントエンドとバックエンドを分離したプロジェクトがあり、データ操作を実装するには、axios などのツールを使用してバックグラウンドにリクエストを送信する必要があります。
その中でも、ファイルのアップロードは比較的難しいものです。この記事では、5 分でファイルをアップロードする方法を説明します。

1. たとえば、写真をアップロードする場合、バックエンドはフロントエンドからformDataタイプのデータを転送する必要があります。

<el-button type="primary" @click="uploadFile2()">クリックしてアップロード</el-button>
 <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" style="display:none;" accept="image/jpeg,image/png,image/gif">

これを実現するためにネイティブ入力を使用します。

アップロードファイル2(){
	// このイベントはボタンがクリックされたときにトリガーされます // この関数はファイルアップロードポップアップボックスを開きます this.$refs.uploadFile2.click()
   },
   ファイル値変更2(){
   // ファイルを選択すると、入力変更イベントがトリガーされ、この関数が入力されます var formData = new FormData()
     // this.$refs.uploadFile2 は Vue で DOM 要素を取得するためのメソッドです // アップロードされたすべてのファイルは files を通じて取得できます。ファイルが複数ある場合は、formData.append('file',this.$refs.uploadFile2.files[0])
     // リクエストタイプを設定する必要があります formData.append('type', "head");
     // ID を渡す必要がある場合は、次のコードを参照してください formData.append('id', this.id);
     // 設定が完了したら、formData 変数をバックエンドに渡すだけです insertNavigationUpload(formData).then(res=>{
       console.log('簡単でしょ?友よ')
     })
   },

1 つのステップを忘れるところでした。axios リクエストの二次カプセル化についてはあまり説明しません。ここではインターフェースのみを示します。

エクスポートconst tMessageNotification = data =>{
  リクエストを返す({
    url:'/tMessageNotification/upload',
    メソッド: 'POST'、
    データ、
    ヘッダー: {'Content-Type': 'application/json'},
  })
}

これで、formData 形式タイプを使用してファイルをアップロードする Vue に関するこの記事は終了です。Vue ファイルのアップロードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で axios を使用してファイル (FormData) をアップロードする方法
  • Vue formDataは画像のアップロードを実現します
  • VueはformDataを使用してデータをバックグラウンドに送信します
  • VuejsはFormDataを使用して画像ファイルのAjaxアップロードを実装します。
  • vue+element_uiはファイルをアップロードし、追加のパラメータを渡します
  • Vue のバックグラウンド例にファイルをアップロードする詳細な説明
  • ファイルアップロード機能を実現するVue Element UI + OSS

<<:  LinuxのCentos7でmysql5.7.29を構築する詳細なプロセス

>>:  Tencent Cloud Serverをゼロから導入する方法

推薦する

Linux でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明

ルーティングとは何ですか?ルーティングとは、相互接続されたネットワークを介して送信元ステーションから...

JSは写真の自動再生効果を実現します

この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な...

MySQL 8.0.11 インストール概要チュートリアル図

インストール環境: CAT /etc/os-release CentOS システムのバージョン情報を...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

dockerでlnmp環境を構築する方法

プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...

docker-compose を使用して MySQL を実行する方法

ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...

MySQLにおける時刻日付型と文字列型の選択について

目次1. DATETIMEとTIMESTAMPの使用1. 類似点2. 相違点3. 選択2. varc...

MySQLで重複行を削除する方法

SQL文 /* MySQL で重複行を削除するいくつかの方法 ---Chu Minfei ---20...

onfocus="this.blur()" は視覚障害のあるウェブマスターに嫌われている

スクリーン リーダー ソフトウェアの操作ページについて話しているとき、彼はフロントエンドの学生たちに...

HTML で入力テキスト入力キャッシュのクリアを禁止する 2 つの方法

ほとんどのブラウザはデフォルトで入力値をキャッシュし、ctl+F5 を使用して強制的に更新することに...

ウェブデザインとは何か

<br />元の記事: http://www.alistapart.com/articl...

react-diagram シリアル化 Json 解釈 ケース分析

このドキュメントの目的はreact-diagramフレームワーク モデルの Json シリアル化を説...

JavaScript関数の使い方の詳細な説明

目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...

MySQL のデータベース パフォーマンスに影響を与える要因の説明

データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...

MySQLのユーザー管理とPostgreSQLのユーザー管理の違い

1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...