快捷導(dǎo)航

Vue.js實現(xiàn)文件上傳和進度條顯示功能

更新時間：2024年11月07日 09:20:32 作者：JJCTO袁龍

在現(xiàn)代Web開發(fā)中,文件上傳是一個常見而重要的需求,無論是在用戶上傳頭像、文檔或者其他類型的文件時,良好的用戶體驗都是至關(guān)重要的,在這篇博客中,我們將介紹如何使用Vue.js來實現(xiàn)文件上傳功能,同時顯示上傳進度條,需要的朋友可以參考下

Vue.js實現(xiàn)文件上傳和進度條顯示功能

在現(xiàn)代Web開發(fā)中，文件上傳是一個常見而重要的需求。無論是在用戶上傳頭像、文檔或者其他類型的文件時，良好的用戶體驗都是至關(guān)重要的。在這篇博客中，我們將介紹如何使用Vue.js來實現(xiàn)文件上傳功能，同時顯示上傳進度條，讓用戶清楚地看到上傳的進展。

項目準(zhǔn)備

首先，我們需要創(chuàng)建一個新的Vue項目。如果你還沒有安裝Vue CLI，可以使用以下命令來安裝```bash
npm install -g @vue/cli

接下來，創(chuàng)建一個新的Vue項目：

vue create file-upload-demo

進入項目目錄：

cd file-upload-demo

啟動開發(fā)服務(wù)器：

npm run serve

現(xiàn)在你應(yīng)該可以在瀏覽器中訪問 http://localhost:8080，看到一個新的Vue應(yīng)用程序的默認界面。

文件上傳組件

接下來，我們將創(chuàng)建一個文件上傳組件。新建一個名為 FileUpload.vue 的文件并在 src/components/ 目錄中添加以下代碼：

<template>
  <div class="file-upload">
    <h2>文件上傳</h2>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上傳</button>
    <div v-if="uploadProgress > 0">
      <p>上傳進度: {{ uploadProgress }}%</p>
      <div class="progress-bar">
        <div class="progress" :style="{ width: uploadProgress + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      uploadProgress: 0,
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (!this.selectedFile) {
        alert("請選擇一個文件上傳！");
        return;
      }

      const formData = new FormData();
      formData.append("file", this.selectedFile);

      try {
        const response = await this.$http.post("/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            this.uploadProgress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
          },
        });

        if (response.status === 200) {
          alert("文件上傳成功！");
             } catch (error) {
        console.error("上傳失敗:", error);
        alert("文件上傳失敗，請重試！");
      }
    },
  },
};
</script>

<style scoped>
.file-upload {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.progress-bar {
  background-color: #f3f3f3;
  border-radius: 4px;
  height: 20px;
  margin-top: 10px;
}
.progress {
  background-color: #4caf50;
  height: 100%;
  border-radius: 4px;
}
</style>

代碼解析

模板部分：
- 我們使用一個文件輸入框讓用戶選擇文件，綁定事件處理函數(shù) handleFileChange。
- 提供一個按鈕用于觸發(fā)文件上傳。
- 當(dāng) uploadProgress 大于0時，就顯示上傳進度。
數(shù)據(jù)部分：
- selectedFile: 存儲用戶選擇的文件。
- uploadProgress: 存儲當(dāng)前文件上傳的進度。
方法部分：
- handleFileChange(event): 處理文件選擇，記錄用戶選擇的文件。
- uploadFile(): 進行文件上傳，通過 axios 發(fā)送一個 POST 請求，利用 FormData 處理文件上傳，同時支持進度監(jiān)控。

依賴安裝

為了讓我們能夠發(fā)送HTTP請求，我們需要安裝Axios。使用以下命令安裝：

npm install axios

然后，在 main.js 文件或具體的組件中引入并配置Axios：

import axios from "axios";
import Vue from "vue";

Vue.prototype.$http = axios.create({
  baseURL: "http://localhost:5000", // 你可以根據(jù)實際情況修改
});

服務(wù)器端代碼（可選）

為了測試文件上傳功能，我們需要一個服務(wù)器端來處理文件上傳。這里提供一個簡單的Node.js服務(wù)器端代碼。

創(chuàng)建一個新的文件 server.js，并添加以下代碼：

const express = require("express");
const multer = require("multer");
const path = require("path");

const app = express();
const port = 5000;

// 文件存儲配置
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/");
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage: storage });

app.post("/upload", upload.single("file"), (req, res) => {
  res.send("文件上傳成功！");
});

app.listen(port, () => {
  console.log(`服務(wù)器正在運行，訪問 http://localhost:${port}`);
});

啟動服務(wù)器

你需要在同一目錄下安裝Express和Multer：

npm install express multer

然后使用以下命令啟動服務(wù)器：

node server.js

整合組件

最后，在 App.vue 中引入我們創(chuàng)建的 FileUpload 組件：

<template>
  <div id="app">
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload'

export default {
  components: {
    FileUpload
  }
}
</script>