axios を使用して vue にファイルをアップロードする

最近 axios を学習し、プロジェクトで使用したため、この記事では主に axios を使用して vue でファイルのアップロードの進行状況をリアルタイムに更新することに関する関連情報を紹介します。この記事では、最初に について簡単に説明します。 axios で誰でもわかる方法を勉強してください、それが必要な友達は以下で一緒に勉強してください。

axios 概要

axios は、ブラウザーおよび nodejs 用の Promise ベースの HTTP クライアントであり、それ自体に次の特徴があります:

• ブラウザーから XMLHttpRequest を作成する

• node.js から http リクエストを作成する

• Promise APIのサポート

• リクエストとレスポンスのインターセプト

• リクエストとレスポンスのデータの変換

• リクエストのキャンセル

• JSONデータの自動変換

• 顧客CSRF /XSRF 防止のサポートを終了

導入方法:

$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

他のプラグインをインストールする場合、main.jsに直接導入し、Vue.use()を使って登録することもできますが、axiosはvueプラグインではないので、は使用できませんVue.use()。そのため、リクエストを送信する必要があるすべてのコンポーネントでオンザフライでのみ導入できます。

この問題を解決するために、axios の導入後、より使いやすくするためにプロトタイプ チェーンを修正しました。

//main.js

import axios from 'axios'
Vue.prototype.$http = axios

これら 2 行のコードを main.js に追加すると、コンポーネントのメソッドで $http コマンドを直接使用できます

methods: {
postData () {
this.$http({
method: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}

さらに基本的な知識については、この記事を参照してください: / /www.jb51.net/article/110324.htm

vue は、axios を使用して、ファイルアップロードの進行状況のリアルタイム更新を実装します

XHR レベル 2 は、進行状況イベントを追加しました。これに基づいて、追加することができます。ブラウザは新しいデータを受信して​​います リアルタイム データ プログレス バーにより、対話がよりフレンドリーになります

vue テンプレート

<p class="progress" @click="upload"
   :style="{backgroundImage:&#39;linear-gradient(to right,#C0C7CB 0%,#C0C7CB &#39;+progress+&#39;,#E1E6E9 &#39;+progress+&#39;,#E1E6E9 100%)&#39;}">

vue-js

 var form = new FormData()
 form.append('file', vm.$refs.upload.files[0])
 form.append('id', id)
 form.append('type', type)
 var config = {
  onUploadProgress: progressEvent => {
   var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
   this.progress = complete
  }
 }
 axios.post(`api/uploadFile`,
  form, config).then((res) => {
  if (res.data.status === 'success') {
   console.log('上传成功')
  }
 })

上記は、私が皆さんのためにまとめたものです。将来すべての人に役立ちます。

関連記事:

Node.js で fs.renameSync を呼び出すときにエラーが発生しますか?

VSCodeでReact Native開発環境を構成する方法

vueにMint-UIをインストールする方法

AngularJSでコレクションデータのトラバーサル表示を実装する方法

以上がaxios を使用して vue にファイルをアップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。