Vueにファイルアップロード機能を実装するにはどうすればよいですか?

Vue は現在フロントエンド開発で最も人気のあるフレームワークの 1 つで、ファイル アップロード機能の実装方法も非常にシンプルかつエレガントです。この記事では、Vueにファイルアップロード機能を実装する方法を紹介します。

1. HTML 部分

次のコードを HTML ファイルに追加して、アップロード フォームを作成します。

<template>
  <div>
    <form ref="uploadForm" 
          enctype="multipart/form-data" 
          class="upload-form" 
          @submit.prevent="submitFile">
      <input type="file" 
             name="file" 
             id="file" 
             class="input-file"
             ref="file"
             @change="handleFileChange" />
      <label for="file" class="btn">选择文件</label>
      <!-- 进度条展示 -->
      <p v-if="showProgress">上传进度：{{ percent }} %</p>
      <button type="submit" 
              class="upload-btn" 
              :disabled="!selectedFile">上传</button>
    </form>
  </div>
</template>

上記のコードでは、フォームとタグを入力して作成します フォームをアップロードします。アップロード フォームの name 属性は、フォーム内のファイルのフィールド名を指定します。 enctype 属性はアップロードするファイルのタイプを示します。ここでは multipart/form-data タイプが使用されます。

ラベル label で、@click.prevent イベントを使用して入力ラベルのクリック イベントをトリガーし、それによってファイル選択ボックスをポップアップします。ここの @change イベントは、ファイルの選択をリッスンし、handleFileChange メソッドを呼び出して、フォーム内のファイル名を更新します。

2. JavaScript 部分

JavaScript ファイルでは、Vue.js のカスタム コンポーネントと axios ライブラリを介してファイルのアップロードを実装する必要があります。

<script>
import axios from 'axios';

export default {
  data () {
    return {
      selectedFile: null,  // 选中的文件
      showProgress: false,  // 是否展示上传进度条
      percent: 0,    // 上传进度百分比
    }
  },
  methods: {
    handleFileChange (event) {
      this.selectedFile = event.target.files[0];
    },
    submitFile () {
      if (!this.selectedFile) return;
      // 新建 from 对象
      const formData = new FormData();
      formData.append('file', this.selectedFile, this.selectedFile.name);

      this.showProgress = true;
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          // 计算上传进度百分比
          this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      };
      axios.post('/api/upload', formData, config)
        .then((response) => {
          console.log(response);
          this.showProgress = false;  // 移除 progress 条
        })
        .catch((error) => {
          console.log(error);
          this.showProgress = false;
        });
    },
  },
};
</script>

ファイルの選択とアップロードを処理するメソッドで handleFileChange() メソッドと submitFile() メソッドを定義します。

• handleFileChange メソッドは、ファイル選択イベントをリッスンし、選択されたファイルを保存します。
• submitFile メソッドは、選択されたファイルが存在するかどうかを判断します。存在しない場合は、ファイルが直接返されます。 new FormData() を使用してフォームを構築し、append メソッドを通じて選択したファイルをフォームに追加します。3 番目のパラメーターはファイル名であることに注意してください。 axios.post は、文字列パラメータを介してファイルをアップロードするための API を指定します。アップロードに要求されるデータは、formData オブジェクトです。Headers の Content-Type 属性は、データ型を指定します。ここでは multipart/form-data タイプが使用され、アップロードはonUploadProgress イベントを通じて監視され、進行状況バーの動的な表示を実現します。

上記のコードでは、axios ライブラリを使用してファイルのアップロード操作を完了します。フロントエンド プロジェクトの package.json ファイルに axios の依存関係を追加します:

"axios": "^0.19.2"

import axios from 'axios'; を通じて導入して使用します。バックエンド API では、Multer ライブラリを使用してファイルのアップロードを処理します。 Multer はファイルのアップロードを処理する Node.js ライブラリであり、ファイルを処理してフォームとともに送信できます。

3. バックエンド API 部分

const express = require('express');
const multer = require('multer');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    const error = new Error('Please upload a file');
    error.httpStatusCode = 400;
    return next(error);
  }
  // 文件重命名
  const oldPath = file.path;
  const newPath = 'uploads/' + file.originalname;
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      console.error(err);
    }
  });
  res.send('File uploaded successfully');
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

アップロードされたファイルのフィールド名は、Multer の単一メソッドを通じて指定されます。Multer は、複数ファイルのアップロードとファイル タイプの制限のための他のメソッドも提供します. 操作を待ちます。アップロードが完了したら、ファイルを初期パスからアップロード ディレクトリに移動します。ファイル名の変更操作により、名前が一意になり、異なるファイル名をアップロードすることによる上書きを回避できます。

上記のコードでは、Express ライブラリを使用して Node.js サーバー アプリケーションを作成します。バックグラウンド プロジェクトの package.json ファイルに次の依存関係を追加します。

"express": "^4.17.1",
"multer": "^1.4.2"

import / require ステートメントを使用して、対応するモジュールを導入して使用します。

4. 例外処理

ファイルのアップロード プロセス中に、ファイル サイズが制限を超えている、ファイル タイプが許可されていない、ネットワーク タイムアウトやサーバー エラーなどの異常な状況が発生する可能性があります。他の要因に応じて、クライアントとサーバーに対応する例外ハンドラーを作成する必要があります。

クライアント部分では、axios ライブラリを使用しているため、then メソッドと catch メソッドを直接使用して、アップロード リクエストによって返された Promise オブジェクトを処理し、アップロードが成功したときと失敗したときにそれぞれ操作を処理できます。 。この記事で提供されているコードでは、Promise.catch() を使用してプロセス実行中に例外を処理します。サーバー側では、例外ごとに実際の状況に応じて異なる処理が必要になります。

5. 概要

この記事では、フロントエンドのファイル選択や進行状況の動的な表示など、Vue.js を使用してファイル アップロード操作を完了する方法を紹介しました。バックグラウンド API の準備や、アップロード プロセス中に発生する可能性のある異常事態への対処だけでなく、アップロード プロセス中のバーの表示も行います。

ファイルのアップロード機能は多くの Web アプリケーションに不可欠な機能ですが、Vue.js の axios ライブラリと Multer ライブラリを使用することで、シンプルかつ洗練されたアップロード処理を実現できます。

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