Vue 中如何實作檔案上傳功能？

Vue作為目前前端開發最受歡迎的框架之一，其實作檔案上傳功能的方式也十分簡單優雅。本文將為大家介紹在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>

如上程式碼中，使用form 和input 標籤來創建上傳表單。上傳表單中的 name 屬性指定表單中檔案的欄位名稱。 enctype 屬性表示要上傳的檔案的類型，這裡使用了 multipart/form-data 類型。

在 label 標籤中透過 @click.prevent 事件來觸發 input 標籤的點擊事件，從而彈出檔案選擇框。這裡的 @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>

在 methods 中定義 handleFileChange()、submitFile() 方法處理檔案選擇和上傳：

• handleFileChange 方法中監聽檔案選擇事件並將選取的檔案儲存起來。
• submitFile 方法中判斷選取的檔案是否存在，不存在則直接回傳。使用 new FormData() 建構一個表單，並將選取的檔案透過 append 方法追加到表單中，注意第三位參數為檔案名稱。 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 函式庫，Multer 可以處理檔案並跟隨表單一起傳送。

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 的single 方法指定了上傳檔案的欄位名，同時Multer 也提供了其他方法進行多檔案上傳和檔案類型限制等操作。我們在上傳完成後會把檔案從初始路徑移到 uploads 目錄中，檔案重新命名操作可以讓名稱唯一避免不同檔案名稱上傳覆蓋。

在上述程式碼中，我們使用了 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 完成檔案上傳操作，包括前端檔案選擇和上傳過程中的進度條動態展示，以及後台APIs 的編寫，同時對上傳過程中可能出現的異常情況進行了處理。

檔案上傳功能是許多 Web 應用程式中不可或缺的一個功能，在 Vue.js 中使用 axios 函式庫和 Multer 函式庫可實現簡單而優雅的上傳流程。

以上是Vue 中如何實作檔案上傳功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！