最近做了大文件（文件夾）分片上傳的需求，記錄一下。

原理

前端進行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對文件進行分片，用數(shù)組將每一個分片存起來，最后將分片發(fā)給后端。由于并發(fā)的原因，需要給每個分片給定index，方便后端進行拼接。

方案

我在做需求之前看了網(wǎng)上的一些方案，大多數(shù)是前端進行分片、發(fā)送分片，在發(fā)送完所有分片請求之后，再給后端發(fā)送一個合并文件的請求。但其實也可以在發(fā)送分片之前就先把文件的一些信息（整個文件的MD5、分片個數(shù)、分片大小、分片的MD5等等）先發(fā)給后端，后端在接收完分片之后就可以自動合并了。

antd Upload

先介紹一下antd中的Upload組件，Upload的API中有一個beforeUpload，該函數(shù)接收兩個參數(shù)，file和fileList，file是一個文件對象，類型是File，屬于Blob的子類，所以可以直接調用file.slice進行分片。值得注意的是，beforeUpload這個鉤子可能會調用多次，比如你上傳一個文件夾，文件夾中有5個文件，那么它就會調用5次。

file文件對象長這樣：

文件分片

上面已經(jīng)說到，可以直接調用file.slice，所以可以在beforeUpload中進行分片，比如：

const createFileChunk = async (file: Blob, size: number) => {
  const fileChunkList = [];
  let cur = 0;
  let index = 0;
  while (cur < file.size) {
    const chunk = file.slice(cur, cur + size);
    fileChunkList.push({ file: chunk, index }); // 可以加入很多信息。比如MD5
    cur += size;
    index += 1;
  }
  return fileChunkList;
};
const beforeUpload = (file: Blob) => {
	const fileChunkList = createFileChunk(file);
	// 其他自定義邏輯
	return true
}

MD5

在分片中加入MD5主要是為了后端收到文件后進行校驗，要注意的是，Blob對象是不能夠作為MD5函數(shù)的參數(shù)的，一般是用FileReader把Blob讀成二進制之后再傳入MD5函數(shù)，比如：

import md5 from 'md5';
const getFileMd5 = (chunk: Blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(chunk);
    reader.onload = (data) => {
      resolve(md5(new Uint8Array(data.target?.result as any)));
    };
    reader.onerror = () => {
      reject(new Error('Failed to read file!'));
    };
  });
};

發(fā)送分片請求

二進制文件的上傳請求是不能用json傳的，如果一定要用json，可以把文件轉成base64（這里不適用，適用于小文件）。

這里附上二進制文件轉base64的方法：

const fileToBase64 = (file: Blob): Promise<string> => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      if (e && e.target && e.target.result) {
        resolve(e.target.result);
      }
    };
  });
};

對于文件上傳的請求，需要用到FormData，http請求頭中的Content-Type要設置為multipart/form-data，比如：

  const formData = new FormData();
  formData.append('file', file); // file為Blob對象

然后把formData作為http請求的body就可以進行發(fā)送了

顯示上傳進度

我這里使用的方案是 已上傳的分片數(shù)量 / 總的分片數(shù)量，這是一種大概的上傳進度，忽略了單個分片上傳的進度，因為是大文件，也沒有必要計算得十分準確。

此外還有錯誤重傳、限制請求并發(fā)數(shù)、斷點續(xù)傳等邏輯，本文不再闡述。

到此這篇關于React文件分段上傳實現(xiàn)方法詳解的文章就介紹到這了,更多相關React文件分段上傳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論