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

在现代Web开发中，文件上传是一个常见而重要的需求。无论是在用户上传头像、文档或者其他类型的文件时，良好的用户体验都是至关重要的。在这篇博客中，我们将介绍如何使用Vue.js来实现文件上传功能，同时显示上传进度条，让用户清楚地看到上传的进展。

项目准备

首先，我们需要创建一个新的Vue项目。如果你还没有安装Vue CLI，可以使用以下命令来安装```bash
npm install -g @vue/cli


接下来，创建一个新的Vue项目：

```bash
vue create file-upload-demo

进入项目目录：

cd file-upload-demo

启动开发服务器：

npm run serve

现在你应该可以在浏览器中访问 http://localhost:8080，看到一个新的Vue应用程序的默认界面。

文件上传组件

接下来，我们将创建一个文件上传组件。新建一个名为 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>

代码解析

模板部分：
- 我们使用一个文件输入框让用户选择文件，绑定事件处理函数 handleFileChange。
- 提供一个按钮用于触发文件上传。
- 当 uploadProgress 大于0时，就显示上传进度。
数据部分：
- selectedFile: 存储用户选择的文件。
- uploadProgress: 存储当前文件上传的进度。
方法部分：
- handleFileChange(event): 处理文件选择，记录用户选择的文件。
- uploadFile(): 进行文件上传，通过 axios 发送一个 POST 请求，利用 FormData 处理文件上传，同时支持进度监控。

依赖安装

为了让我们能够发送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", // 你可以根据实际情况修改
});

服务器端代码（可选）

为了测试文件上传功能，我们需要一个服务器端来处理文件上传。这里提供一个简单的Node.js服务器端代码。

创建一个新的文件 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(`服务器正在运行，访问 http://localhost:${port}`);
});

启动服务器

你需要在同一目录下安装Express和Multer：

npm install express multer

然后使用以下命令启动服务器：

node server.js

整合组件

最后，在 App.vue 中引入我们创建的 FileUpload 组件：

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

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

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

结论

到此，我们已经成功构建了一个简单的文件上传组件，用户可以通过它选择文件并查看上传进度。这种方式在实际开发中广泛使用，并且通过Vue.js和Axios的结合，提升了用户体验。

希望这篇博客能够帮助你在项目中实现文件上传功能。如果你有任何问题或建议，请随时留言讨论！

更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

在这里插入图片描述