Vue Formdata 上傳文件詳解

一、Vue Formdata 介紹

Vue.js 是當下最流行的前端開發框架之一，它採用了數據響應式、組件化的開發方式，使得代碼的復用性和可維護性更高。Vue Formdata 則是 Vue.js 中的一個組件，它主要負責實現文件上傳功能。

Vue Formdata 在文件上傳的同時，可以實現其他表單欄位的提交，並且通過監聽上傳的進度實時反饋上傳進度，是一個非常方便和易用的組件。

二、上傳文件的基本流程

在使用 Vue Formdata 前，我們需要先了解一個上傳文件的基本流程：

1. 用戶在表單中選擇要上傳的文件；

2. 用戶提交表單，伺服器端接收到文件；

3. 伺服器端處理上傳的文件，返回處理結果。

三、使用 Vue Formdata 實現文件上傳

下面我們來介紹如何使用 Vue Formdata 完成文件上傳。首先，我們需要在 Vue 組件中引入 Vue Formdata：

import Vue from 'vue';
import VueFormData from 'vue-formdata';

Vue.use(VueFormData);

接著，在模板中添加文件上傳表單：

<template>
  <form @submit.prevent="onSubmit">
    <input type="file" name="file" @change="onChangeFile">
    <button type="submit">上傳文件</button>
  </form>
</template>

在 Vue 組件的 data 中定義文件變數和表單欄位：

<script>
  export default {
    data() {
      return {
        file: null,
        formData: {
          name: '',
          email: '',
        },
      };
    },

接著，在 methods 中添加 onSubmit 和 onChangeFile 的方法：

methods: {
  onChangeFile(event) {
    this.file = event.target.files[0];
  },
  async onSubmit(event) {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', this.file);
    formData.append('name', this.formData.name);
    formData.append('email', this.formData.email);
    try {
      const response = await axios.post('/api/upload', formData);
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  },
},

在 onSubmit 方法中，我們創建了一個 FormData 對象，然後通過 append() 方法向 formData 中添加上傳文件和其他表單欄位。接著，我們使用 axios.post() 方法發送 POST 請求，將 formData 作為參數傳遞給伺服器端。

四、監控上傳進度

Vue Formdata 還提供了一個 progress 事件，可以用來監控上傳文件的進度。我們可以在 onSubmit 方法中添加如下代碼：

async onSubmit(event) {
  event.preventDefault();
  const formData = new FormData();
  formData.append('file', this.file);
  formData.append('name', this.formData.name);
  formData.append('email', this.formData.email);
  const config = {
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(percentCompleted);
    },
  };
  try {
    const response = await axios.post('/api/upload', formData, config);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
},

在 config 中，我們定義了一個 onUploadProgress 回調函數，每次上傳進度發生變化時都會調用該函數。我們可以在該函數中實時獲取上傳進度並列印到控制台。

五、總結

Vue Formdata 提供了非常方便的文件上傳功能，可以輕鬆地實現文件上傳和其他表單欄位的提交。同時，通過監聽 progress 事件，我們還可以實時反饋上傳進度，提升用戶體驗。希望本文能對大家掌握 Vue Formdata 的使用有所幫助。