React+Node.js：大文件断点续传的实现

前端

2024-02-01 09:34:25

在现代Web开发中，用户经常需要上传或下载大文件，如视频、图像、大型数据集等。为了确保大文件传输的可靠性和性能，实现断点续传功能非常重要。断点续传允许用户在遇到网络中断或其他问题时能够从中断点继续传输文件，而无需重新开始整个传输过程。

React是一个流行的前端JavaScript库，用于构建用户界面。Node.js是一个流行的后端JavaScript运行时环境，用于构建服务器端应用程序。这两个技术栈的结合可以实现功能强大的Web应用程序。

React+Node.js断点续传的实现

1. React前端部分

使用React创建前端用户界面，包括文件选择器、进度条等控件。
使用HTML5 File API获取用户选择的文件信息。
使用AJAX将文件信息发送到Node.js服务器端。

2. Node.js服务器端部分

使用Express框架创建Node.js服务器。
使用multer中间件处理文件上传。
使用fs模块存储文件到磁盘。
使用断点续传中间件处理断点续传请求。

3. 断点续传中间件

断点续传中间件是一个重要的组件，它负责处理断点续传请求。中间件需要实现以下功能：

检查请求头中的Range字段，判断是否为断点续传请求。
如果是断点续传请求，从请求头中的Range字段中获取断点信息。
从磁盘读取文件内容，从断点处开始读取。
将文件内容写入HTTP响应体，并设置HTTP状态码为206（Partial Content）。

4. 实现断点续传功能的示例代码

React前端部分

import React, { useState } from "react";
import axios from "axios";

const FileUpload = () => {
  const [file, setFile] = useState(null);

  const handleFileUpload = (e) => {
    const data = new FormData();
    data.append("file", file);

    axios.post("/upload", data, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log(res.data);
    });
  };

  return (
    <div>
      <input type="file" onChange={(e) => setFile(e.target.files[0])} />
      <button onClick={handleFileUpload}>Upload</button>
    </div>
  );
};

export default FileUpload;

Node.js服务器端部分

const express = require("express");
const multer = require("multer");
const fs = require("fs");

const app = express();

const storage = multer.diskStorage({
  destination: "./uploads/",
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname);
  },
});

const upload = multer({ storage });

app.post("/upload", upload.single("file"), (req, res) => {
  const file = req.file;
  res.json({ message: "File uploaded successfully", file });
});

app.listen(3000);

断点续传中间件

const express = require("express");
const fs = require("fs");

const app = express();

app.use((req, res, next) => {
  if (req.headers.range) {
    const range = req.headers.range;
    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0]);
    const end = parts[1] ? parseInt(parts[1]) : fs.statSync(req.file.path).size - 1;

    const file = fs.createReadStream(req.file.path, { start, end });
    res.writeHead(206, {
      "Content-Range": `bytes ${start}-${end}/${fs.statSync(req.file.path).size}`,
      "Content-Length": end - start + 1,
    });
    file.pipe(res);
  } else {
    next();
  }
});

app.listen(3000);