React实现分片上传和下载

当涉及到在 React 应用中实现分片上传和下载的方案时，我们可以通过结合前端技术和后端服务来完成这个任务。在本文中，我将为你提供一个实现分片上传和下载的详细方案，并且给出代码示例。

分片上传实现

前端实现

1. 创建一个文件上传组件，在其中添加一个文件选择输入框和一个上传按钮。

import React, { useState } from "react";

const FileUploader = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = () => {
    // 将选中的文件分片并上传
    // 实现代码取决于选择的后端服务
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>上传</button>
    </div>
  );
};

export default FileUploader;

2. 在 handleUpload 函数中，将选中的文件分片并上传至后端。

const handleUpload = () => {
  const chunkSize = 1024 * 1024; // 指定分片大小为1MB
  const totalChunks = Math.ceil(selectedFile.size / chunkSize);
  const fileReader = new FileReader();

  fileReader.onloadend = () => {
    const chunkData = new Blob([fileReader.result]);

    // 发送分片数据至后端进行处理
    // 实现代码取决于选择的后端服务
  };

  let currentChunk = 0;
  const uploadNextChunk = () => {
    const start = currentChunk * chunkSize;
    const end = Math.min(selectedFile.size, start + chunkSize);
    const chunk = selectedFile.slice(start, end);

    fileReader.readAsArrayBuffer(chunk);
    currentChunk++;

    if (currentChunk < totalChunks) {
      // 还有分片需要上传
      setTimeout(uploadNextChunk, 1000); // 为了避免上传过快，可以设置每个分片之间的延迟
    } else {
      // 所有分片上传完毕
    }
  };

  uploadNextChunk();
};

后端实现

后端实现的方式取决于你选择的后端服务。以下是一个基于 Express 和 Multer 的简单示例：

1. 安装依赖：

npm install express multer

2. 创建一个 Express 服务器，并添加一个用于接收分片的路由。

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

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

app.post("/upload", upload.single("file"), (req, res) => {
  // 分片文件保存在req.file中，可以将其存储到数据库或者文件系统中
  // 根据需要处理分片数据
  // 返回响应给前端
});

app.listen(3000, () => {
  console.log("服务器已启动，监听端口 3000");
});

这样，通过前端和后端的结合，我们就能够实现分片上传。

分片下载实现

对于分片下载，我们可以使用类似的方法来实现。

前端实现

1. 创建一个文件下载组件，并添加一个下载按钮。

import React from "react";

const FileDownloader = () => {
  const handleDownload = () => {
    // 下载分片文件
    // 实现代码取决于选择的后端服务
  };

  return (
    <div>
      <button onClick={handleDownload}>下载</button>
    </div>
  );
};

export default FileDownloader;

2. 在 handleDownload 函数中，请求后端获取分片文件并进行拼接。

const handleDownload = async () => {
  const response = await fetch("/download");
  const blob = await response.blob();

  // 创建URL对象，用于生成下载链接
  const downloadUrl = URL.createObjectURL(blob);

  // 创建一个下载链接并模拟点击
  const link = document.createElement("a");
  link.href = downloadUrl;
  link.download = "file.txt"; // 文件名可以根据需要进行动态设置
  link.click();
};

后端实现

后端实现的方式仍然取决于你选择的后端服务。以下是一个基于 Express 的简单示例：

1. 创建一个 Express 服务器，并添加一个用于提供分片下载的路由。

const express = require("express");

const app = express();

app.get("/download", async (req, res) => {
  // 从数据库或者文件系统中获取分片文件并进行拼接
  // 根据需要处理分片数据
  // 返回响应给前端
});

app.listen(3000, () => {
  console.log("服务器已启动，监听端口 3000");
});

2. 然后，你可以根据需要从数据库或文件系统中获取分片文件，并将它们进行拼接。拼接可以使用 Buffer.concat 方法来完成。

const { promises: fs } = require("fs");

app.get("/download", async (req, res) => {
  const chunkFolder = "chunk_files/"; // 存储分片文件的文件夹
  const chunkNames = await fs.readdir(chunkFolder); // 获取所有分片文件的文件名
  const sortedChunkNames = chunkNames.sort((a, b) => a - b); // 按照分片的顺序进行排序

  const chunks = await Promise.all(
    sortedChunkNames.map((chunkName) =>
      fs.readFile(chunkFolder + chunkName)
    )
  );

  const fileBuffer = Buffer.concat(chunks);

  // 将拼接后的文件响应给前端
  res.set("Content-Type", "application/octet-stream");
  res.set("Content-Disposition", "attachment; filename=file.txt");
  res.send(fileBuffer);
});

这样，通过前端和后端的结合，我们就能够实现分片下载。

请注意，这只是一个简单的示例。根据你的实际需求，你可能需要更多逻辑来处理错误、并发请求、上传/下载进度等。希望这个方案能帮助到你！如果有任何疑问，请随时提问。