前端react函数组件实现大文件分片上传完整代码

在React中，实现大文件分片上传通常会涉及到`fetch`、`FormData`以及一些状态管理（如Redux、useState或React Hooks）。下面是一个简单的例子，展示了如何使用函数组件和基本的JavaScript实现分块上传：

import React, { useState } from 'react';
import axios from 'axios';

const ChunkedFileUpload = ({ file, chunkSize }) => {
  const [uploading, setUploading] = useState(false);
  const [chunks, setChunks] = useState([]);

  const handleChunkUpload = async (chunk) => {
    setUploading(true);
    try {
      await axios.post('/api/upload', { chunk }, { headers: { 'Content-Type': 'multipart/form-data' } });
      setChunks([...chunks, chunk]);
    } catch (error) {
      console.error('Error uploading chunk:', error);
    }
    setUploading(false);
  };

  const uploadFile = async () => {
    if (!file) return;
    const fileSize = file.size;
    const numChunks = Math.ceil(fileSize / chunkSize);

    for (let i = 0; i < numChunks; i++) {
      const start = i * chunkSize;
      const end = Math.min(start + chunkSize - 1, fileSize - 1);
      const chunkData = file.slice(start, end);
      
      await handleChunkUpload(chunkData);
    }
  };

  return (
    <div>
      {/* 文件预览和上传按钮 */}
      <button onClick={uploadFile} disabled={uploading}>
        {'Uploading' if (uploading) else 'Upload'}
      </button>
      <pre>{JSON.stringify(chunks, null, 2)}</pre> {/* 显示已上传的chunk信息 */}
    </div>
  );
};

export default ChunkedFileUpload;

注意：
1. 这里假设你已经有了一个后端API `/api/upload`接收分片上传的数据。
2. `chunkSize`是每个分块的大小，可以根据实际需求调整。
3. 这段代码没有处理断点续传的情况，如果需要支持断点续传，你需要在服务器端存储已上传的块ID并根据此恢复上传。