亲宝软件园·资讯

展开

React文件分段上传实现方法详解

Kobe_G 人气:0

最近做了大文件(文件夹)分片上传的需求,记录一下。

原理

前端进行大文件分片上传的方案几乎都是利用Blob.prototype.slice方法对文件进行分片,用数组将每一个分片存起来,最后将分片发给后端。由于并发的原因,需要给每个分片给定index,方便后端进行拼接。

方案

我在做需求之前看了网上的一些方案,大多数是前端进行分片、发送分片,在发送完所有分片请求之后,再给后端发送一个合并文件的请求。但其实也可以在发送分片之前就先把文件的一些信息(整个文件的MD5、分片个数、分片大小、分片的MD5等等)先发给后端,后端在接收完分片之后就可以自动合并了。

antd Upload

先介绍一下antd中的Upload组件,Upload的API中有一个beforeUpload,该函数接收两个参数,file和fileList,file是一个文件对象,类型是File,属于Blob的子类,所以可以直接调用file.slice进行分片。值得注意的是,beforeUpload这个钩子可能会调用多次,比如你上传一个文件夹,文件夹中有5个文件,那么它就会调用5次。

file文件对象长这样:

文件分片

上面已经说到,可以直接调用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函数的参数的,一般是用FileReader把Blob读成二进制之后再传入MD5函数,比如:

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!'));
    };
  });
};

发送分片请求

二进制文件的上传请求是不能用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就可以进行发送了

显示上传进度

我这里使用的方案是 已上传的分片数量 / 总的分片数量,这是一种大概的上传进度,忽略了单个分片上传的进度,因为是大文件,也没有必要计算得十分准确。

此外还有错误重传、限制请求并发数、断点续传等逻辑,本文不再阐述。

加载全部内容

相关教程
猜你喜欢
用户评论