ホームページ > 記事 > ウェブフロントエンド > 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:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">
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開発環境を構成する方法
AngularJSでコレクションデータのトラバーサル表示を実装する方法
以上がaxios を使用して vue にファイルをアップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。