利用React和Koa2实现文件分片上传的新思路

前端

2023-12-11 07:44:56

背景

如今，我们正生活在一个信息爆炸的时代，大量的数据和文件需要在网络上传输。其中，大文件上传的需求越来越普遍，例如高清视频、软件安装包、科学研究数据等。然而，传统的单片文件上传方式存在许多弊端：

传输速度慢： 大文件传输可能需要花费很长时间，尤其是在网络状况较差的情况下。
容易失败： 大文件传输更容易受到网络波动、服务器故障等因素的影响，导致传输失败。
无法断点续传： 如果在传输过程中发生故障，传统方式无法实现断点续传，需要重新上传整个文件。

文件分片上传的优势

为了解决传统单片文件上传的弊端，文件分片上传技术应运而生。文件分片上传将大文件分成多个较小的片段，然后将这些片段分别上传到服务器。这种方式具有以下优势：

提高传输速度： 文件分片上传可以提高传输速度，因为多个片段可以同时上传，充分利用网络带宽。
减少失败率： 如果某个片段的上传失败，只影响该片段，其他片段仍然可以继续上传。这极大地减少了整个文件传输失败的风险。
支持断点续传： 如果在传输过程中发生故障，文件分片上传可以实现断点续传，无需重新上传整个文件。

使用React和Koa2实现文件分片上传

接下来，我们将介绍如何使用React和Koa2实现文件分片上传。我们使用React来构建前端界面，Koa2作为后端服务器。

前端实现

前端主要负责将文件分成片段、发送片段到服务器以及处理服务器的响应。我们使用React的useState钩子来存储文件分片和上传进度，并使用React的useEffect钩子来监听文件分片上传的状态。

const FileUploader = () => {
  const [file, setFile] = useState(null);
  const [progress, setProgress] = useState(0);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = () => {
    const formData = new FormData();
    formData.append("file", file);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload");
    xhr.upload.addEventListener("progress", (e) => {
      setProgress(Math.round((e.loaded / e.total) * 100));
    });
    xhr.send(formData);
  };

  return (
    <div>
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>上传</button>
      <div>上传进度：{progress}%</div>
    </div>
  );
};

后端实现

后端主要负责接收文件分片、存储文件分片以及合并文件分片。我们使用Koa2作为后端服务器，并使用Koa2的body-parser中间件来解析文件分片。

const Koa = require("koa");
const bodyParser = require("koa-bodyparser");

const app = new Koa();
app.use(bodyParser());

app.post("/upload", async (ctx) => {
  const file = ctx.request.files.file;
  const filename = file.name;
  const filetype = file.type;
  const filesize = file.size;

  // 将文件分片存储到临时目录
  const tempFilePath = path.join(os.tmpdir(), filename);
  await file.mv(tempFilePath);

  // 合并文件分片
  const mergedFilePath = path.join(__dirname, "uploads", filename);
  await mergeFiles(tempFilePath, mergedFilePath);

  // 删除临时目录中的文件分片
  fs.unlinkSync(tempFilePath);

  ctx.body = {
    filename,
    filetype,
    filesize,
  };
});

app.listen(3000);

实现断点续传

为了实现断点续传，我们需要在前端和后端都做一些修改。

在前端，我们需要在发送文件分片时附带一个分片索引。在后端，我们需要根据分片索引来判断是否需要合并文件分片。

// 前端
const handleUpload = () => {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("index", index);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload");
  xhr.upload.addEventListener("progress", (e) => {
    setProgress(Math.round((e.loaded / e.total) * 100));
  });
  xhr.send(formData);
};

// 后端
const app = new Koa();
app.use(bodyParser());

app.post("/upload", async (ctx) => {
  const file = ctx.request.files.file;
  const filename = file.name;
  const filetype = file.type;
  const filesize = file.size;
  const index = ctx.request.body.index;

  // 判断是否需要合并文件分片
  const mergedFilePath = path.join(__dirname, "uploads", filename);
  if (index === 0) {
    // 第一个分片，创建新文件
    await file.mv(mergedFilePath);
  } else {
    // 非第一个分片，追加到现有文件
    const fileHandle = await fs.open(mergedFilePath, "a");
    await fileHandle.appendFile(file.data);
    await fileHandle.close();
  }

  ctx.body = {
    filename,
    filetype,
    filesize,
  };
});

app.listen(3000);