Vue.js实现文件上传和进度条显示功能

vue create file-upload-demo

cd file-upload-demo

npm run serve

<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>

npm install axios

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

Vue.prototype.$http = axios.create({
  baseURL: "http://localhost:5000", // 你可以根据实际情况修改
});

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(`服务器正在运行，访问 http://localhost:${port}`);
});

npm install express multer

node server.js

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

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

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