import React, { useState } from 'react';
function FileInput() {
  const [fileContent, setFileContent] = useState('');
  // 讀取文件內容到ArrayBuffer
  function readFileToArrayBuffer(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      // 注冊文件讀取完成后的回調函數
      reader.onload = function(event) {
        const arrayBuffer = event.target.result;
        resolve(arrayBuffer);
      };
      // 讀取文件內容到ArrayBuffer
      reader.readAsArrayBuffer(file);
    });
  }
  // 將ArrayBuffer轉為十六進制字符串
  function arrayBufferToHexString(arrayBuffer) {
    const uint8Array = new Uint8Array(arrayBuffer);
    let hexString = '';
    for (let i = 0; i < uint8Array.length; i++) {
      const hex = uint8Array[i].toString(16).padStart(2, '0');
      hexString += hex;
    }
    return hexString;
  }
  // 處理文件選擇事件
  function handleFileChange(event) {
    const file = event.target.files[0];  // 獲取選中的文件
    if (file) {
      readFileToArrayBuffer(file)
        .then(arrayBuffer => {
          const hexString = arrayBufferToHexString(arrayBuffer);
          setFileContent(hexString);
        })
        .catch(error => {
          console.error('文件讀取失敗:', error);
        });
    } else {
      setFileContent('請選擇一個文件');
    }
  }
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <div>
        <h4>文件內容：</h4>
        <pre>{fileContent}</pre>
      </div>
    </div>
  );
}
export default FileInput;
 

graph LR
A(開始) --> B{選擇文件}
B -- 用戶選擇文件 --> C[切割文件為多個切片]
C --> D{上傳切片}
D -- 上傳完成 --> E[合并切片為完整文件]
E -- 文件合并完成 --> F(上傳成功)
D -- 上傳中斷 --> G{保存上傳進度}
G -- 上傳恢復 --> D
G -- 取消上傳 --> H(上傳取消)

const [selectedFile, setSelectedFile] = useState(null); 
const [progress, setProgress] = useState(0);
 // 處理文件選擇事件
 function handleFileChange(event) {
   setSelectedFile(event.target.files[0]);
 }
 // 處理文件上傳事件
 function handleFileUpload() {
   if (selectedFile) {
     // 計算切片數量和每個切片的大小
     const fileSize = selectedFile.size;
     const chunkSize = 1024 * 1024; // 設置切片大小為1MB
     const totalChunks = Math.ceil(fileSize / chunkSize);
     // 創(chuàng)建FormData對象，并添加文件信息
     const formData = new FormData();
     formData.append('file', selectedFile);
     formData.append('totalChunks', totalChunks);
     // 循環(huán)上傳切片
     for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
       const start = chunkNumber * chunkSize;
       const end = Math.min(start + chunkSize, fileSize);
       const chunk = selectedFile.slice(start, end);
       formData.append(`chunk-${chunkNumber}`, chunk, selectedFile.name);
     }
     // 發(fā)起文件上傳請求
     axios.post('/upload', formData, {
       onUploadProgress: progressEvent => {
         const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
         setProgress(progress);
       }
     })
       .then(response => {
         console.log('文件上傳成功:', response.data);
       })
       .catch(error => {
         console.error('文件上傳失敗:', error);
       });
   }
 }

function downloadFile() {
  // 發(fā)起文件下載請求
  fetch('/download', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then(response => response.json())
    .then(data => {
      const totalSize = data.totalSize;
      const totalChunks = data.totalChunks;
      let downloadedChunks = 0;
      let chunks = [];
      // 下載每個切片
      for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
        fetch(`/download/${chunkNumber}`, {
          method: 'GET',
        })
          .then(response => response.blob())
          .then(chunk => {
            downloadedChunks++;
            chunks.push(chunk);
            // 當所有切片都下載完成時
            if (downloadedChunks === totalChunks) {
              // 合并切片
              const mergedBlob = new Blob(chunks);
              // 創(chuàng)建對象 URL，生成下載鏈接
              const downloadUrl = window.URL.createObjectURL(mergedBlob);
              // 創(chuàng)建 <a> 元素并設置屬性
              const link = document.createElement('a');
              link.href = downloadUrl;
              link.setAttribute('download', 'file.txt');
              // 模擬點擊下載
              link.click();
              // 釋放資源
              window.URL.revokeObjectURL(downloadUrl);
            }
          });
      }
    })
    .catch(error => {
      console.error('文件下載失敗:', error);
    });
}
 

  // 處理文件下載事件
  function handleFileDownload() {
    axios.get('/download', {
      responseType: 'blob',
      onDownloadProgress: progressEvent => {
        const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        setProgress(progress);
      }
    })
      .then(response => {
        // 創(chuàng)建一個臨時的URL對象用于下載
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.txt');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
      .catch(error => {
        console.error('文件下載失敗:', error);
      });
  }
  <button onClick={handleFileDownload}>下載文件</button>
  <div>進度：{progress}%</div>

- 使用 JavaScript 的 `File API` 獲取文件對象，并使用 `Blob.prototype.slice()` 方法將文件切割為多個切片。

const [file, setFile] = useState(null);  //用來存放我本地上傳的文件
const chunkSize = 1024 * 1024; // 1MB 切片大小
  const upload = () => {
    if (!file) {
      alert("請選擇要上傳的文件！");
      return;
    }
    const chunkSize = 1024 * 1024; // 1MB
    let start = 0;
    let end = Math.min(chunkSize, file.size);
    while (start < file.size) {
      const chunk = file.slice(start, end);
      // 創(chuàng)建FormData對象
      const formData = new FormData();
      formData.append('file', chunk);
      // 發(fā)送切片到服務器
      fetch('上傳接口xxxx', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        // 處理響應結果
      })
      .catch(error => {
        console.error(error);
        // 處理錯誤
      });
      start = end;
      end = Math.min(start + chunkSize, file.size);
    }
  };
 return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={upload}>上傳</button>
    </div>
  );
}

import React, { useState, useRef, useEffect } from 'react';
function Upload() {
  const [file, setFile] = useState(null);
  const [uploadedChunks, setUploadedChunks] = useState([]);
  const [uploading, setUploading] = useState(false);
  const uploadRequestRef = useRef();
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };
  const uploadChunk = (chunk) => {
    // 創(chuàng)建FormData對象
    const formData = new FormData();
    formData.append('file', chunk);
    // 發(fā)送切片到服務器
    return fetch('your-upload-url', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
      // 處理響應結果
      return data;
    });
  };
  const upload = async () => {
    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 uploadChunk(chunk);
          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');
  };
  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>
  );
}