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

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

WBOY

リリース： 2023-06-25 13:38:58

オリジナル

12195 人が閲覧しました

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

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 メソッドを呼び出して、フォーム内のファイル名を更新します。

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 ライブラリであり、ファイルを処理してフォームとともに送信できます。

バックエンド 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 ステートメントを使用して、対応するモジュールを導入して使用します。

例外処理

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

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

概要

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

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

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