vue でファイルアップロード機能を実装する方法 (2 つのオプション)

Vue は、Web アプリケーションの開発を加速するための豊富なコンポーネントとツールを多数提供する、非常に人気のあるフロントエンド開発フレームワークです。実際の開発では、ファイルをアップロードする機能を Vue を使用して実装する必要があることがよくあります。この記事では、ファイルをアップロードするための Vue のソリューションを紹介します。

オプション 1: サードパーティ コンポーネントを使用する

Vue には、vue-dropzone、 など、ファイルのアップロードに使用できるサードパーティ コンポーネントが多数あります。 vue-file-upload 、vue-upload-component など。これらのコンポーネントは、ファイルのアップロードを容易にする豊富な API とスタイルを提供します。次の例では、例として vue-upload-component を使用します。

コンポーネントのインストール

npm install vue-upload-component --save

data のコンポーネントで

<template>
  <div>
    <file-upload
      ref="upload"
      :extensions="[&#39;jpg&#39;, &#39;png&#39;, &#39;gif&#39;]"
      :headers="headers"
      :url="url"
      @input="onInputChange"
      @start="onUploadStart"
      @end="onUploadEnd"
      @before="onBeforeUpload"
      @success="onUploadSuccess"
      @error="onUploadError"
    >
      <template slot="before">选择文件</template>
      <template slot="drag">将文件拖拽到此区域上传</template>
    </file-upload>
  </div>
</template>

<script>
import FileUpload from "vue-upload-component";

export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + token, // 根据实际情况设置token
      },
      url: "https://xxxx/upload", // 上传地址
    };
  },
  methods: {
    onUploadSuccess(response, file) {
      console.log(response, file);
    },
    onUploadError(err, response, file) {
      console.log(err, response, file);
    },
    onBeforeUpload(file) {
      console.log(file);
    },
    onUploadStart(file) {
      console.log(file);
    },
    onUploadEnd(file) {
      console.log(file);
    },
    onInputChange(file) {
      console.log(file);
    },
  },
};
</script>

を使用します。 () には、アップロードされた headers と url を設定できます。このコンポーネントは、実際のニーズに応じて呼び出すことができる多くのフック関数も提供します。コンポーネントのインスタンスは、ref 属性を使用してコンポーネントのメソッドを呼び出すことで取得できます。例:

this.$refs.upload.active = true; // 开始上传

オプション 2: axios を使用してリクエストを送信します

Inサードパーティ コンポーネントの使用に加えて、ファイルのアップロードに加えて、axios を使用してファイルをアップロードするリクエストを送信することもできます。次のコード例は、axios を使用してファイルをアップロードする方法を示しています。

axios のインストール

npm install axios --save

コードの実装

<template>
   <div>
      <input type="file" @change="onFileChange" />
   </div>
</template>

<script>
import axios from 'axios';

export default {
   methods: {
      onFileChange(event) {
         const url = 'https://xxxx/upload';
         const file = event.target.files[0];
         const formData = new FormData();
         formData.append('file', file);
         axios.post(url, formData, {
            headers: {
               Authorization: "Bearer " + token, // 根据实际情况设置token
            }
         })
         .then(res => {
            console.log(res.data);
         })
         .catch(err => {
            console.log(err);
         })
      }
   }
}
</script>

input type="file"## を取得することにより、 # 要素の値を指定してから、FormData オブジェクトを作成し、そのファイル オブジェクトを FormData に追加します。最後に、axios を使用して POST リクエストを送信してファイルをアップロードし、認証のためにリクエスト ヘッダーに Authorization 属性を追加します。

概要

Vue には、ファイル アップロード機能を完了するための便利なコンポーネントとツールが多数用意されています。サードパーティのコンポーネントを利用してこれを迅速に実装することも、axios を使用してファイルをアップロードするリクエストを送信することもできます。セキュリティを確保するために、ファイルをアップロードするためのインターフェースに認証を追加する必要がある場合があります。この記事をお読みいただきありがとうございます。

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