怎么用Vue+NodeJS实现大文件上传

在现代Web应用中，大文件上传是一个常见的需求。无论是上传视频、图片还是其他大型文件，都需要一种高效且可靠的方式来处理这些文件。本文将介绍如何使用Vue.js和Node.js实现大文件上传功能。

1. 概述

大文件上传通常面临以下几个挑战：

1. 文件大小限制：浏览器和服务器通常对上传文件的大小有限制。
2. 网络不稳定：大文件上传过程中可能会遇到网络中断或波动。
3. 内存占用：大文件上传可能会占用大量内存，影响服务器性能。

为了解决这些问题，我们可以采用分片上传的方式，将大文件分割成多个小块，逐个上传，最后在服务器端合并。

2. 技术栈

• 前端：Vue.js
• 后端：Node.js + Express
• 文件存储：本地文件系统（也可以使用云存储服务如AWS S3）

3. 前端实现

3.1 文件选择与分片

首先，我们需要在前端实现文件选择和分片功能。可以使用<input type="file">元素来选择文件，并使用FileReader API读取文件内容。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      chunkSize: 1024 * 1024, // 1MB
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      if (!this.file) return;

      const totalChunks = Math.ceil(this.file.size / this.chunkSize);
      for (let i = 0; i < totalChunks; i++) {
        const start = i * this.chunkSize;
        const end = Math.min(start + this.chunkSize, this.file.size);
        const chunk = this.file.slice(start, end);

        await this.uploadChunk(chunk, i, totalChunks);
      }
    },
    async uploadChunk(chunk, index, totalChunks) {
      const formData = new FormData();
      formData.append('file', chunk);
      formData.append('index', index);
      formData.append('totalChunks', totalChunks);
      formData.append('filename', this.file.name);

      try {
        const response = await fetch('/upload', {
          method: 'POST',
          body: formData,
        });
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('上传失败:', error);
      }
    },
  },
};
</script>

3.2 分片上传

在uploadChunk方法中，我们将每个分片通过FormData对象发送到服务器。每个分片都包含以下信息：

• file：分片数据
• index：当前分片的索引
• totalChunks：总分片数
• filename：文件名

4. 后端实现

4.1 接收分片

在后端，我们需要接收前端发送的分片，并将其保存到临时目录中。可以使用multer中间件来处理文件上传。

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

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  const { index, totalChunks, filename } = req.body;
  const chunkPath = path.join('uploads', `${filename}.part${index}`);

  fs.renameSync(req.file.path, chunkPath);

  res.json({ success: true, index });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

4.2 合并分片

当所有分片上传完成后，我们需要将它们合并成一个完整的文件。

app.post('/merge', express.json(), (req, res) => {
  const { filename, totalChunks } = req.body;
  const mergedFilePath = path.join('uploads', filename);
  const writeStream = fs.createWriteStream(mergedFilePath);

  const mergeChunks = (index) => {
    if (index >= totalChunks) {
      writeStream.end();
      res.json({ success: true });
      return;
    }

    const chunkPath = path.join('uploads', `${filename}.part${index}`);
    const readStream = fs.createReadStream(chunkPath);

    readStream.pipe(writeStream, { end: false });
    readStream.on('end', () => {
      fs.unlinkSync(chunkPath);
      mergeChunks(index + 1);
    });
  };

  mergeChunks(0);
});

4.3 前端触发合并

在前端，当所有分片上传完成后，可以发送一个请求到/merge接口来触发文件合并。

async uploadFile() {
  if (!this.file) return;

  const totalChunks = Math.ceil(this.file.size / this.chunkSize);
  for (let i = 0; i < totalChunks; i++) {
    const start = i * this.chunkSize;
    const end = Math.min(start + this.chunkSize, this.file.size);
    const chunk = this.file.slice(start, end);

    await this.uploadChunk(chunk, i, totalChunks);
  }

  // 所有分片上传完成后触发合并
  await this.mergeFile();
},
async mergeFile() {
  try {
    const response = await fetch('/merge', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        filename: this.file.name,
        totalChunks: Math.ceil(this.file.size / this.chunkSize),
      }),
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('合并失败:', error);
  }
},

5. 总结

通过分片上传的方式，我们可以有效地解决大文件上传的问题。前端将文件分割成多个小块，逐个上传，后端接收并保存这些分片，最后将它们合并成一个完整的文件。这种方式不仅减少了内存占用，还能在网络不稳定的情况下实现断点续传。

当然，这只是一个基础的实现，实际应用中还可以进一步优化，例如：

• 断点续传：记录已上传的分片，避免重复上传。
• 并发上传：同时上传多个分片，提高上传速度。
• 进度显示：实时显示上传进度，提升用户体验。

希望本文能帮助你实现大文件上传功能，并为你的Web应用带来更好的用户体验。