大文件分片上传和分片下载

import { ChangeEvent, useState } from 'react';

function FileInput() {
  // 读取文件内容到 ArrayBuffer
  function readFileToArrayBuffer(file: File): Promise<ArrayBuffer> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      // 注册文件读取完成后的回调函数
      reader.onload = function (event) {
        const arrayBuffer = event.target?.result as ArrayBuffer;
        resolve(arrayBuffer);
      };

      // 读取文件内容到 ArrayBuffer
      reader.readAsArrayBuffer(file);

      // 处理文件读取错误
      reader.onerror = function (error) {
        reject(error);
      };
    });
  }

 
  // 处理文件选择事件
  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]; // 获取选择的文件

    if (file) {
      readFileToArrayBuffer(file)
        .then((arrayBuffer) => {
         // 此处已经能拿到文件的`arrayBuffer`信息，也就是Blob数据
        })
        .catch((error) => {
          console.error('文件读取失败:', error);
        });
    } 
  }

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
    </div>
  );
}

export default FileInput;

const reader = new FileReader();

reader.onload = function(event) {
  // 读取操作成功完成时执行的代码
  const result = event.target.result;
  console.log('文件内容:', result);
};

const file = ...; // 获取的文件对象
reader.readAsArrayBuffer(file); // 或者使用其他读取方法

document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      // 进度事件
      reader.onprogress = function(e) {
        if (e.lengthComputable) {
          const percentLoaded = (e.loaded / e.total) * 100;
          document.getElementById('progressBar').value = percentLoaded;
        }
      };

      // 定义 onload 事件处理程序
      reader.onload = function(e) {
        const content = e.target.result;
        document.getElementById('fileContent').textContent = content;
      };

      // 读取文件为文本
      reader.readAsText(file);
    });

/**
 * 将文件读取为 ArrayBuffer 并分片
 * @param file 要读取的文件
 * @returns 返回包含分片 Blob 数组的 Promise
 */
function readFileToArrayBuffer(file: File): Promise<{ chunkList: Blob[] }> {
  return new Promise((resolve, reject) => {
    let currentChunk = 0; // 当前分片的索引
    const chunkSize = 1024 * 1024; // 设置分片大小为 1MB
    const chunks = Math.ceil(file.size / chunkSize); // 计算总分片数
    const fileReader = new FileReader(); // 创建 FileReader 对象
    const chunkList: Blob[] = []; // 存储分片的数组

    // 文件读取完成后的回调函数
    fileReader.onload = function (e) {
      currentChunk++; // 增加当前分片索引

      // 如果还有分片需要读取，继续读取下一个分片
      if (currentChunk < chunks) {
        loadNextChunk();
      } else {
        // 所有分片读取完成，resolve Promise 并返回分片数组
        resolve({ chunkList });
      }
    };

    // 文件读取出错时的回调函数
    fileReader.onerror = function (e) {
      console.warn('读取文件出错', e);
      reject(e); // reject Promise 并传递错误信息
    };

    // 读取下一个分片的函数
    function loadNextChunk() {
      const start = currentChunk * chunkSize; // 当前分片的起始字节
      const end = start + chunkSize >= file.size ? file.size : start + chunkSize; // 当前分片的结束字节

      const chunk = file.slice(start, end); // 切割文件得到当前分片
      chunkList.push(chunk); // 将当前分片添加到分片数组中
      fileReader.readAsArrayBuffer(chunk); // 读取当前分片为 ArrayBuffer
    }

    // 开始读取第一个分片
    loadNextChunk();
  });
}

function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]; // 获取选择的文件
    if (file) {
      readFileToArrayBuffer(file)
        .then(({ chunkList }) => {
          for (let i = 0; i < chunkList.length; i++) {
            const chunk = chunkList[i];
            console.log('chunk', chunk);
          }
        })
        .catch((error) => {
          console.error('文件读取失败:', error);
        });
    }
  }

readFileToArrayBuffer(file)
    .then(async ({ chunkList }) => {
      for (let i = 0; i < chunkList.length; i++) {
        const chunk = chunkList[i];
        await upChunk(chunk, i);
      }
    })
    .catch((error) => {
      console.error('文件读取失败:', error);
    });

/**
 * 异步上传文件分片
 *
 * @param chunk - 当前需要上传的文件分片 (Blob 对象)
 * @param index - 当前文件分片的索引
 */
const upChunk = async (chunk: Blob, index: number) => {
  const formData = new FormData();
  // 上传的唯一标识符，用于区分不同的文件上传，前后端约定的值
  formData.append('uploadId', 'front789');
  formData.append('partIndex', index.toString());
  formData.append('partFile', chunk);

  try {
    // 发送 POST 请求上传当前分片
    await axios.post('上传地址', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (progressEvent) => {
        // 检查进度事件的总大小是否存在
        if (progressEvent.total) {
          // 计算已上传的百分比
          const percentCompleted = Math.round((progressEvent.loaded / progressEvent.total) * 100);
          // 在这里添加更新进度条的逻辑
        }
      },
    });
  } catch (error) {
    // 如果上传失败，打印错误信息
    console.error(`Chunk ${index + 1} upload failed:`, error);
  }
  // 打印分片上传完成的信息
  console.log(`上传分片 ${index}完成`);
};

async function downloadable() {
  try {
    // 发送文件下载请求，获取文件的总大小和总分片数
    const response = await fetch('/download', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // 解析响应数据
    const data = await response.json();
    const totalSize = data.totalSize;
    const totalChunks = data.totalChunks;

    // 初始化变量
    let downloadedChunks = 0;
    const chunks: Blob[] = [];

    // 下载每个分片
    for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
      try {
        const chunkResponse = await fetch(`/download/${chunkNumber}`, {
          method: 'GET',
        });

        const chunk = await chunkResponse.blob();
        downloadedChunks++;
        chunks.push(chunk);

        // 当所有分片下载完成时
        if (downloadedChunks === totalChunks) {
          // 合并分片
          const mergedBlob = new Blob(chunks);

          // 创建对象 URL 以生成下载链接
          const downloadUrl = window.URL.createObjectURL(mergedBlob);

          // 创建一个 <a> 元素并设置属性
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.setAttribute('download', 'file.txt');

          // 模拟点击下载
          link.click();

          // 释放资源
          window.URL.revokeObjectURL(downloadUrl);
        }
      } catch (chunkError) {
        console.error(`Chunk ${chunkNumber} download failed:`, chunkError);
      }
    }
  } catch (error) {
    console.error('文件下载失败:', error);
  }
}

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

function FileUp() {
  const [file, setFile] = useState(null); // 本地上传的文件
  const [uploadedChunks, setUploadedChunks] = useState([]); // 已上传的分片列表
  const [uploading, setUploading] = useState(false); // 上传是否进行中

  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
    setFile(event.target.files?.[0]);
  }

  // 处理文件选择事件
  async function upload() {
    if (!file) {
      alert('请选择要上传的文件！');
      return;
    }
    const chunkSize = 1024 * 1024; // 1MB
    const totalChunks = Math.ceil(file.size / chunkSize);

    let start = 0;
    let end = Math.min(chunkSize, file.size);
    setUploading(true);

    for (let i = 0; i < totalChunks; i++) {
      const chunk = file.slice(start, end);
      const uploadedChunkIndex = uploadedChunks.indexOf(i);

      if (uploadedChunkIndex === -1) {
        try {
          const response = await upChunk(chunk, i);
          setUploadedChunks((prevChunks) => [...prevChunks, i]);

          // 将已上传的分片列表保存到本地存储
          localStorage.setItem('uploadedChunks', JSON.stringify(uploadedChunks));
        } catch (error) {
          console.error(error); // 处理错误
        }
      }

      start = end;
      end = Math.min(start + chunkSize, file.size);
    }

    setUploading(false);

    // 上传完成，清除本地存储中的分片信息
    localStorage.removeItem('uploadedChunks');
  }

  const upChunk = async (chunk: Blob, index: number) => {
    const formData = new FormData();
    // 这应该是一个随机值，用于标识当前上传的文件，这是和后端做约定的值
    formData.append('uploadId', 'front789');
    formData.append('partIndex', index.toString());
    formData.append('partFile', chunk);

    try {
      return await axios.post(`https://Front789/api/uploadChunk`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });
    } catch (error) {
      console.error(`Chunk ${index + 1} upload failed:`, error);
    }

    console.log(`上传分片 ${index}完成`);
  };

  useEffect(() => {
    const storedUploadedChunks = localStorage.getItem('uploadedChunks');

    if (storedUploadedChunks) {
      setUploadedChunks(JSON.parse(storedUploadedChunks));
    }
  }, []);

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

export default FileUp;