正文

教你轻松学会React断点续传上传，告别文件上传烦恼

/0 浏览量
0624

在处理大文件上传时，断点续传是一种非常实用的技术。它可以在网络不稳定或上传过程中意外中断的情况下，允许用户从上次中断的地方继续上传，而不是从头开始。React作为当前流行的前端框架，也支持这种功能。下面，我将详细讲解如何在React中实现断点续传上传，让你告别文件上传的烦恼。

一、断点续传的基本原理

断点续传的核心思想是将大文件分割成多个小块，然后分别上传。如果上传过程中断，只需要重新上传中断的小块即可。以下是实现断点续传的步骤：

  1. 将文件分割成多个小块。
  2. 对每个小块进行上传。
  3. 上传成功后，记录每个小块的MD5值。
  4. 上传完成后，将所有小块的MD5值与服务器端比对，确保文件完整性。

二、React实现断点续传上传

1. 创建React项目

首先，你需要创建一个React项目。可以使用create-react-app命令行工具快速创建：

npx create-react-app react-upload
cd react-upload

2. 安装依赖

为了实现断点续传，我们需要使用一些第三方库，如axios和crypto-js：

npm install axios crypto-js

3. 编写断点续传组件

接下来，我们将创建一个名为Upload的React组件，用于实现断点续传上传功能。

import React, { useState } from 'react';
import axios from 'axios';
import CryptoJS from 'crypto-js';

const Upload = () => {
  const [file, setFile] = useState(null);
  const [uploading, setUploading] = useState(false);

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

  const handleUpload = async () => {
    if (!file) {
      alert('请选择一个文件');
      return;
    }

    const chunkSize = 1 * 1024 * 1024; // 分块大小为1MB
    const chunks = Math.ceil(file.size / chunkSize);
    const formData = new FormData();
    let uploaded = 0;

    for (let i = 0; i < chunks; i++) {
      const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
      formData.append('file', chunk);

      const chunkHash = CryptoJS.SHA256(chunk).toString();
      formData.append('chunkHash', chunkHash);

      try {
        const response = await axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });

        if (response.data.success) {
          uploaded++;
          console.log(`已上传 ${uploaded}/${chunks} 块`);
        }
      } catch (error) {
        console.error('上传失败', error);
      }
    }

    alert('上传完成');
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={uploading}>
        {uploading ? '上传中...' : '上传'}
      </button>
    </div>
  );
};

export default Upload;

4. 配置服务器端

在服务器端，你需要创建一个接口来处理文件上传。以下是一个简单的Node.js示例：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const crypto = require('crypto');

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

app.post('/upload', upload.array('file'), async (req, res) => {
  const files = req.files;
  const chunkHashes = req.body.chunkHashes;

  const fileHash = crypto.createHash('sha256');
  for (const file of files) {
    fileHash.update(file.buffer);
  }
  const fileFinalHash = fileHash.digest('hex');

  if (chunkHashes.join('') === fileFinalHash) {
    const targetPath = `uploads/${fileFinalHash}`;
    if (!fs.existsSync(targetPath)) {
      fs.renameSync(files[0].path, targetPath);
    }
    res.send({ success: true });
  } else {
    res.send({ success: false });
  }
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

5. 运行项目

现在，你可以启动React项目和服务端项目，然后在浏览器中访问React应用，选择一个文件进行上传。

三、总结

通过以上步骤，你可以在React中实现断点续传上传功能。这种方法可以有效提高文件上传的稳定性，减少用户等待时间。在实际应用中，你可以根据需求对代码进行优化和扩展。希望这篇文章能帮助你解决文件上传的烦恼。

-- 展开阅读全文 --