基于 Node+Vue 实现大文件上传和断点续传功能

前端

2024-01-08 19:49:38

Node.js 和 Vue.js 简介

Node.js 是一个流行的 JavaScript 运行时环境，因其跨平台、高性能和事件驱动的特点而受到广泛欢迎。而 Vue.js 是一个渐进式 JavaScript 框架，以其简洁的 API 和高效的响应式系统而著称。

分块文件

为了提高大文件上传的效率，我们将采用分块文件的方法。这种方法将文件分割成更小的块，然后逐块上传。这不仅可以减少网络延迟的影响，还可以并行上传块，从而缩短总体上传时间。

服务器端逻辑

在服务器端，我们需要编写代码来处理分块文件上传。这包括接收文件块、存储块并最终合并它们以重建原始文件。我们还可以实现断点续传功能，允许用户在中断后继续上传文件。

Vue.js 前端界面

在 Vue.js 中，我们可以构建一个前端界面来处理文件上传。这包括创建文件选择控件、进度条和其他用户界面元素。我们还可以利用 Vue.js 的响应式系统来实时更新上传进度和状态。

代码示例

以下是一些 Node.js 和 Vue.js 的代码示例，展示了如何实现大文件上传和断点续传功能：

// Node.js 代码示例

const express = require('express');
const multer = require('multer');

const app = express();

// 配置 multer 存储引擎和上传目录
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  },
});

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

// 定义上传路由
app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ message: 'File uploaded successfully!' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

// Vue.js 代码示例

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <progress :value="progress" max="100"></progress>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];

      // 分块文件并上传
      const chunkSize = 1024 * 1024; // 1MB
      const totalChunks = Math.ceil(file.size / chunkSize);
      let currentChunk = 0;

      const formData = new FormData();
      formData.append('file', file);
      formData.append('totalChunks', totalChunks);

      while (currentChunk < totalChunks) {
        const startByte = currentChunk * chunkSize;
        const endByte = Math.min(startByte + chunkSize - 1, file.size - 1);
        const chunk = file.slice(startByte, endByte + 1);

        formData.append('chunk', chunk);

        axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          onUploadProgress: (progressEvent) => {
            this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
          },
        }).then(() => {
          // 上传成功，处理后续逻辑
        }).catch(() => {
          // 上传失败，处理错误
        });

        currentChunk++;
      }
    },
  },
};
</script>