基于Vue3+Node.js实现大文件上传功能

npm install express multer crypto fs path

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

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

// 秒传检测
app.post('/check-hash', upload.none(), (req, res) => {
  const { hash } = req.body;
  const existingFile = fs.readdirSync('uploads/').find(f => f.includes(hash));
  if (existingFile) {
    res.json({ success: true, exists: true, file: existingFile });
  } else {
    res.json({ success: true, exists: false });
  }
});

// 分片上传
app.post('/upload-chunk', upload.single('file'), (req, res) => {
  const file = req.file;
  const { chunkIndex, totalChunks, fileName, hash } = req.body;
  const chunkPath = path.join('uploads/chunks', fileName, `${chunkIndex}.part`);
  fs.mkdirSync(path.dirname(chunkPath), { recursive: true });
  fs.renameSync(file.path, chunkPath);

  // 检查所有分片是否上传完成
  const allChunksUploaded = Array.from({ length: totalChunks }, (_, i) => `${i}.part`)
    .every(chunk => fs.existsSync(path.join('Uploads/chunks', fileName, chunk)));

  if (allChunksUploaded) {
    // 合并分片
    const finalPath = path.join('Uploads', `${hash}_${fileName}`);
    const writeStream = fs.createWriteStream(finalPath);
    for (let i = 0; i < totalChunks; i++) {
      const chunk = fs.createReadStream(path.join('Uploads/chunks', fileName, `${i}.part`));
      chunk.pipe(writeStream, { end: false });
      chunk.on('end', () => {
        if (i === totalChunks - 1) {
          writeStream.end();
          // 清理分片目录
          fs.rmSync(path.join('Uploads/chunks', fileName), { recursive: true });
          res.json({ success: true, message: 'File uploaded and chunks merged' });
        }
      });
    }
  } else {
    res.json({ success: true, message: 'Chunk uploaded', chunkIndex });
  }
});

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

npm install vue vue-router axios vue-upload-component

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
    <div v-if="uploading">上传中... {{ progress }}%</div>
    <div v-if="uploaded">上传成功！</div>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploading: false,
      progress: 0,
      uploaded: false,
      error: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.uploaded = false;
      this.error = null;
    },
    async computeFileHash(file) {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const hash = crypto.createHash('md5').update(Buffer.from(event.target.result)).digest('hex');
          resolve(hash);
        };
        reader.readAsArrayBuffer(file);
      });
    },
    async uploadFile() {
      if (!this.file) {
        this.error = '请先选择文件';
        return;
      }

      // 秒传检测
      const hash = await this.computeFileHash(this.file);
      const checkResponse = await axios.post('http://localhost:3000/check-hash', { hash });
      if (checkResponse.data.exists) {
        this.uploaded = true;
        this.error = '文件已存在，无需重复上传';
        return;
      }

      // 分片上传
      const chunkSize = 10 * 1024 * 1024; // 10MB
      const totalChunks = Math.ceil(this.file.size / chunkSize);
      let uploadedChunks = 0;

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

        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkIndex', i);
        formData.append('totalChunks', totalChunks);
        formData.append('fileName', this.file.name);
        formData.append('hash', hash);

        try {
          await axios.post('http://localhost:3000/upload-chunk', formData, {
            onUploadProgress: (progressEvent) => {
              const percent = (progressEvent.loaded / progressEvent.total) * 100;
              this.progress = (uploadedChunks / totalChunks) * 100 + (percent / totalChunks);
            },
          });
          uploadedChunks++;
        } catch (err) {
          this.error = `分片 ${i} 上传失败：${err.message}`;
          this.uploading = false;
          return;
        }
      }

      this.uploading = false;
      this.uploaded = true;
    },
  },
};
</script>

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import UploadComponent from './components/UploadComponent.vue';

const app = createApp(App);
app.component('UploadComponent', UploadComponent);
app.use(router);
app.mount('#app');