利用 React 实现文件分片上传和下载的功能，提升文件传输效率与稳定性

2023-09-28 10:07:35

React 实现文件分片上传和下载

文件上传和下载是 Web 开发中经常遇到的需求，特别是在需要处理大文件时。传统的上传和下载方式可能会遇到一些问题，比如网络传输不稳定、文件过大导致传输时间过长等等。分片上传和下载可以解决这些问题。

分片上传和下载是指将文件分成多个较小的块，然后逐块传输。这样可以减少网络传输对文件的影响，降低网络传输不稳定的风险，并且可以将一个大文件拆分成多个小文件来传输，加快上传和下载速度。

React 是一个流行的前端 JavaScript 框架，可以用来构建用户界面。React 也提供了对文件上传和下载的支持。在本文中，我们将介绍如何使用 React 实现文件分片上传和下载。

实现文件分片上传和下载的步骤

安装必要的依赖

npm install --save react-dropzone axios

创建 React 组件

import React, { useState } from "react";
import Dropzone from "react-dropzone";
import axios from "axios";

const FileUpload = () => {
  const [files, setFiles] = useState([]);

  const onDrop = (acceptedFiles) => {
    setFiles(acceptedFiles);
  };

  const onUpload = () => {
    const formData = new FormData();
    files.forEach((file) => {
      formData.append("file", file);
    });

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

  return (
    <div>
      <Dropzone onDrop={onDrop}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drag 'n' drop some files here, or click to select files</p>
          </div>
        )}
      </Dropzone>
      <button onClick={onUpload}>Upload</button>
    </div>
  );
};

export default FileUpload;

在 React 应用程序中使用组件

import FileUpload from "./FileUpload";

const App = () => {
  return (
    <div>
      <FileUpload />
    </div>
  );
};

export default App;

在服务器端处理文件上传

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

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

const upload = multer({ storage: storage });

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

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});