大文件断点续传

需要开发一个网页应用,用于用户上传大文件。考虑到可能的网络中断,我们希望实现断点续传功能,使得上传过程能从中断处恢复。

需求分析

  • 前端:切割文件为小块,逐块上传,记录上传状态。
  • 后端:支持分块上传的处理逻辑,记录上传进度以便恢复。
  • 安全性:保证上传文件的完整性和安全性。

技术选择

  • 前端:JavaScript (可使用 React/Vue 等框架),Fetch API。
  • 后端:Node.js 和 Express.js 作为服务器框架,配合数据库存储上传状态。

前端实现

1. 分块上传

文件被分割成多个块,每块上传并记录状态:

javascript 复制代码
javascriptconst CHUNK_SIZE = 2 * 1024 * 1024; // 每块2MB
const API_URL = 'http://localhost:3000/upload';

function splitFile(file) {
  const chunks = [];
  let start = 0;

  while (start < file.size) {
    const end = Math.min(start + CHUNK_SIZE, file.size);
    chunks.push({ blob: file.slice(start, end), number: chunks.length });
    start += CHUNK_SIZE;
  }

  return chunks;
}

async function uploadFile(file) {
  const chunks = splitFile(file);
  const lastUploadedChunk = await getUploadedChunkNumber(file.name);

  for (const chunk of chunks.slice(lastUploadedChunk + 1)) {
    await uploadChunk(chunk.blob, chunk.number, file.name);
  }

  console.log('File upload complete');
}

async function uploadChunk(chunkBlob, chunkNumber, fileName) {
  const formData = new FormData();
  formData.append('chunk', chunkBlob);
  formData.append('chunkNumber', chunkNumber);
  formData.append('fileName', fileName);

  try {
    await fetch(API_URL, { method: 'POST', body: formData });
    console.log(`Chunk ${chunkNumber} uploaded`);
  } catch (error) {
    console.error(`Failed to upload chunk ${chunkNumber}`, error);
  }
}

async function getUploadedChunkNumber(fileName) {
  const response = await fetch(`${API_URL}/status?fileName=${fileName}`);
  const { lastChunkNumber } = await response.json();
  return lastChunkNumber || -1;
}

后端实现

使用 Node.js 和 Express.js 搭建服务器,处理块上传请求并记录状态。

ini 复制代码
javascriptconst express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
const UPLOAD_DIR = path.join(__dirname, 'uploads');

app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.post('/upload', (req, res) => {
  const { chunkNumber, fileName } = req.body;
  const filePath = path.join(UPLOAD_DIR, fileName);

  const writeStream = fs.createWriteStream(filePath, {
    flags: 'a',
  });

  req.pipe(writeStream);

  writeStream.on('close', () => {
    updateChunkStatus(fileName, chunkNumber);
    res.sendStatus(200);
  });

  writeStream.on('error', () => {
    res.sendStatus(500);
  });
});

app.get('/upload/status', (req, res) => {
  const { fileName } = req.query;
  const lastChunkNumber = getLastUploadedChunk(fileName);
  res.json({ lastChunkNumber });
});

function updateChunkStatus(fileName, chunkNumber) {
  // Assume we use a database or JSON file to store uploaded status
  // Simulated here with a simple JSON file approach
  const statusFile = path.join(UPLOAD_DIR, `${fileName}.json`);
  let status = {};

  if (fs.existsSync(statusFile)) {
    status = JSON.parse(fs.readFileSync(statusFile));
  }

  status[fileName] = chunkNumber;
  fs.writeFileSync(statusFile, JSON.stringify(status));
}

function getLastUploadedChunk(fileName) {
  const statusFile = path.join(UPLOAD_DIR, `${fileName}.json`);
  if (fs.existsSync(statusFile)) {
    const status = JSON.parse(fs.readFileSync(statusFile));
    return status[fileName] || -1;
  }
  return -1;
}

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

注意事项

  • 文件完整性:确保所有块按正确顺序合并,必要时进行校验。
  • 错误处理和重试机制:在传输失败时,提供重试或处理错误的机制。
  • 安全性:验证用户权限及完整性以防止恶意上传。

通过这种方式,我们实现了一个基本断点续传的系统,适合用例中大文件上传的需求。该系统提供了简单但有效的解决方案来处理网络中断和提升用户体验。

相关推荐
雪碧聊技术7 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了8 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust