大文件分片上传，玩转React、TypeScript和Node.js，让文件上传不再困难

前端

2024-02-09 02:54:53

引言

在现代Web应用程序中，大文件上传已经变得越来越普遍。无论是上传高清视频、大型数据集还是复杂的CAD文件，对高效且用户友好的上传解决方案的需求都在不断增长。传统的文件上传方法在处理大文件时往往会遇到困难，导致上传缓慢、不可靠，甚至失败。

为了解决这些挑战，分片上传技术应运而生。分片上传将大文件分解成较小的块，并行上传这些块。这大大提高了上传速度和可靠性，因为即使其中一个块上传失败，也不会影响整个文件的上传过程。

使用React、TypeScript和Node.js实现大文件分片上传

在本教程中，我们将逐步构建一个使用React、TypeScript和Node.js实现的大文件分片上传解决方案。我们将使用以下技术栈：

React：用于构建前端用户界面
TypeScript：用于类型安全和代码重用
Node.js：用于构建后端服务器
Express：用于处理HTTP请求和响应
MongoDB：用于存储文件元数据和上传进度

前端实现

安装依赖项

npm install --save react react-dom typescript @types/react @types/react-dom

创建React组件

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

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

  useEffect(() => {
    // ...
  }, [file]);

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    // ...
  };

  const handleUpload = () => {
    // ...
  };

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

export default FileUploader;

与后端通信

import axios from "axios";

const uploadFile = async (file: File) => {
  const formData = new FormData();
  formData.append("file", file);

  const response = await axios.post("/api/upload", formData, {
    onUploadProgress: (progressEvent) => {
      const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      setProgress(percentage);
    },
  });

  return response.data;
};

后端实现

安装依赖项

npm install --save express multer mongodb

创建Express路由

import express from "express";
import multer from "multer";
import { GridFSBucket, GridFSFile } from "mongodb";

const router = express.Router();

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

const upload = multer({ storage });

router.post("/api/upload", upload.single("file"), async (req, res) => {
  // ...
});

export default router;

与MongoDB交互

import { GridFSBucket, GridFSFile } from "mongodb";

const uploadFile = async (file: Express.Multer.File) => {
  const bucket = new GridFSBucket(db, {
    bucketName: "uploads",
  });

  const uploadStream = bucket.openUploadStream(file.originalname);
  uploadStream.write(file.buffer);
  uploadStream.end();

  const fileInfo: GridFSFile = await bucket.findOne({ filename: file.originalname });
  return fileInfo;
};