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

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

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

项目准备

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

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

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>