Vue がファイル アップロード機能を実装する方法を説明する例

Vue は、フロントエンド開発で広く使用されている人気のある JavaScript フレームワークです。 Vue ではファイルのアップロードは非常に一般的な要件であるため、この記事では Vue のアップロード ファイルの書き方を紹介します。

1. インストールの依存関係

Vue ファイルのアップロードには axios と vue-router の使用が必要なので、次の 2 つの依存関係をインストールする必要があります:

npm install axios vue-router --save

2. HTML コード

Vue がファイルをアップロードするための HTML コードは次のとおりです:

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="upload">上传</button>
  </div>
</template>

このうち、onFileChange はファイルが選択されたときにトリガーされるイベント、upload はアップロード ボタンがクリックされたときにトリガーされるイベントです。 。

3. JavaScript コード

次に、Vue の JavaScript コードを記述する必要があります:

<script>
  import axios from 'axios'
  import router from 'vue-router'
  
  export default {
    name: 'file-upload',
    data () {
      return {
        file: null,
        errorMsg: ''
      }
    },
    methods: {
      onFileChange (event) {
        this.file = event.target.files[0];
      },
      upload () {
        let formData = new FormData();
        formData.append('file', this.file);
        
        let token = localStorage.getItem('token');
        if (token) {
          axios.post('/api/upload', formData, {
            headers: {
              'Authorization': 'Bearer ' + token
            }
          })
          .then(response => {
            router.push('/success');
          })
          .catch(error => {
            this.errorMsg = '上传文件失败';
          })
        }
      }
    }
  }
</script>

その中で、最初に axios と vue-router の依存関係をインポートし、次に A を定義します。 data オブジェクトには、file と errorMsg という 2 つの属性が含まれており、それぞれファイルとエラー メッセージを表します。

次に、onFileChange と Upload という 2 つのメソッドを定義しました。 onFileChange メソッドは、ファイルが選択されるとトリガーされ、選択されたファイルをデータ オブジェクトのファイル属性に保存します。アップロード ボタンがクリックされると、アップロード メソッドがトリガーされます。最初に FormData オブジェクトが作成され、次に axios.post メソッドを通じてファイルがサーバーにアップロードされます。アップロードが成功した後、vue-router を使用してジャンプします。成功ページ。アップロード プロセス中にエラーが発生しました。errorMsg 属性には、ファイルのアップロードに失敗したことを示す値が割り当てられます。

4. まとめ

Vue によるファイルアップロードの書き方は比較的簡単で、axios と vue-router という 2 つの依存関係の使い方を理解するだけでファイルアップロード機能を実現できます。この記事での紹介が皆様のお役に立てれば幸いです。

以上がVue がファイル アップロード機能を実装する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。