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

原理

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

方案

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

antd Upload

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

file文件對(duì)象長這樣：

文件分片

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

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主要是為了后端收到文件后進(jìn)行校驗(yàn)，要注意的是，Blob對(duì)象是不能夠作為MD5函數(shù)的參數(shù)的，一般是用FileReader把Blob讀成二進(jìn)制之后再傳入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ā)送分片請(qǐng)求

二進(jìn)制文件的上傳請(qǐng)求是不能用json傳的，如果一定要用json，可以把文件轉(zhuǎn)成base64（這里不適用，適用于小文件）。

這里附上二進(jìn)制文件轉(zhuǎn)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);
      }
    };
  });
};

對(duì)于文件上傳的請(qǐng)求，需要用到FormData，http請(qǐng)求頭中的Content-Type要設(shè)置為multipart/form-data，比如：

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

然后把formData作為http請(qǐng)求的body就可以進(jìn)行發(fā)送了

顯示上傳進(jìn)度

我這里使用的方案是 已上傳的分片數(shù)量 / 總的分片數(shù)量，這是一種大概的上傳進(jìn)度，忽略了單個(gè)分片上傳的進(jìn)度，因?yàn)槭谴笪募矝]有必要計(jì)算得十分準(zhǔn)確。

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

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

最新評(píng)論