React前端开发中实现断点续传

在前端开发中，断点续传是指在上传文件时，如果上传过程中中断（如网络断开、页面刷新等），可以从断点处继续上传，而不是重新上传整个文件。这种功能在大文件上传场景中非常有用。
以下是实现断点续传的思路和具体步骤：

实现思路

文件分片：

将大文件分割成多个小文件块（chunk）。
每个文件块单独上传。

记录上传进度：

使用本地存储（如 localStorage）或服务端记录已上传的文件块。

断点续传：

在上传前检查已上传的文件块，跳过已上传的部分。
从未上传的部分开始继续上传。

合并文件：

所有文件块上传完成后，通知服务端合并文件。

实现步骤

1. 前端实现

以下是基于 React 和 Axios 的断点续传实现示例：

import React, { useState, useRef } from "react";
import axios from "axios";const chunkSize = 1024 * 1024; // 每个文件块的大小（1MB）const FileUpload = () => {const [file, setFile] = useState(null);const [progress, setProgress] = useState(0);const fileInputRef = useRef(null);// 处理文件选择const handleFileChange = (e) => {const selectedFile = e.target.files[0];setFile(selectedFile);};// 上传文件const handleUpload = async () => {if (!file) return;const totalChunks = Math.ceil(file.size / chunkSize); // 总文件块数let uploadedChunks = 0; // 已上传的文件块数// 检查已上传的文件块const uploadedChunksFromStorage = JSON.parse(localStorage.getItem(file.name) || []);for (let i = 0; i < totalChunks; i++) {// 如果当前文件块已上传，跳过if (uploadedChunksFromStorage.includes(i)) continue;const start = i * chunkSize;const end = Math.min(start + chunkSize, file.size);const chunk = file.slice(start, end); // 获取文件块const formData = new FormData();formData.append("file", chunk);formData.append("fileName", file.name);formData.append("chunkIndex", i);formData.append("totalChunks", totalChunks);try {await axios.post("/upload", formData, {headers: { "Content-Type": "multipart/form-data" },});// 更新已上传的文件块uploadedChunksFromStorage.push(i);localStorage.setItem(file.name, JSON.stringify(uploadedChunksFromStorage));// 更新上传进度uploadedChunks++;setProgress(Math.round((uploadedChunks / totalChunks) * 100));} catch (error) {console.error("上传失败", error);return;}}// 所有文件块上传完成后，通知服务端合并文件try {await axios.post("/merge", { fileName: file.name });alert("上传完成");localStorage.removeItem(file.name); // 清除本地存储的上传记录setProgress(0);fileInputRef.current.value = ""; // 清空文件输入} catch (error) {console.error("文件合并失败", error);}};return (<div><h1>文件断点续传</h1><input type="file" onChange={handleFileChange} ref={fileInputRef} /><button onClick={handleUpload}>上传</button><div>上传进度: {progress}%</div></div>);
};export default FileUpload;

2. 服务端实现

服务端需要支持文件块的上传和合并。以下是一个简单的 Node.js 实现示例：

const express = require("express");
const multer = require("multer");
const fs = require("fs");
const path = require("path");const app = express();
const upload = multer({ dest: "uploads/" });// 上传文件块
app.post("/upload", upload.single("file"), (req, res) => {const { fileName, chunkIndex } = req.body;const chunkPath = path.join("uploads", `${fileName}-${chunkIndex}`);// 将文件块保存到临时目录fs.renameSync(req.file.path, chunkPath);res.send({ message: "文件块上传成功" });
});// 合并文件块
app.post("/merge", (req, res) => {const { fileName } = req.body;const chunksDir = path.join("uploads");const chunks = fs.readdirSync(chunksDir).filter((file) => file.startsWith(fileName)).sort((a, b) => a.split("-")[1] - b.split("-")[1]);// 创建可写流const writeStream = fs.createWriteStream(path.join("uploads", fileName));// 合并文件块chunks.forEach((chunk) => {const chunkPath = path.join(chunksDir, chunk);const readStream = fs.createReadStream(chunkPath);readStream.pipe(writeStream, { end: false });readStream.on("end", () => {fs.unlinkSync(chunkPath); // 删除已合并的文件块});});writeStream.on("finish", () => {res.send({ message: "文件合并成功" });});
});app.listen(3000, () => {console.log("服务端运行在 http://localhost:3000");
});