大文件上传

在无数个失眠的晚上，相信会有很多人，习惯性的闭上眼睛，安静的想念一个人。

文件上传方式

1. 秒传

• 你把要上传的东西上传，服务器会先做 MD5 校验，如果服务器上有一样的东西，它就直接给你个新地址，其实你下载的都是服务器上的同一个文件，想要不秒传，其实只要让 MD5 改变，就是对文件本身做一下修改（改名字不行），例如一个文本文件，你多加几个字，MD5 就变了，就不会秒传了。
• MD5：MD5 信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个 128 位（16 字节）的散列值（hash value），用于确保信息传输完整一致。

2. 分片上传

• 分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为 Part）来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。

3. 断点续传(分片上传的衍生)

• 断点续传是在下载或上传时，将下载或上传任务（一个文件或一个压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传或者下载未完成的部分，而没有必要从头开始上传或者下载。本文的断点续传主要是针对断点上传场景。

• 断点续传逻辑

• 在分片上传的过程中，如果因为系统崩溃或者网络中断等异常因素导致上传中断，这时候客户端需要记录上传的进度。在之后支持再次上传时，可以继续从上次上传中断的地方进行继续上传。

• 为了避免客户端在上传之后的进度数据被删除而导致重新开始从头上传的问题，服务端也可以提供相应的接口便于客户端对已经上传的分片数据进行查询，从而使客户端知道已经上传的分片数据，从而从下一个分片数据开始继续上传。

• 断点续传逻辑实现流程步骤

1. 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；
2. 初始化一个分片上传任务，返回本次分片上传唯一标识；
3. 按照一定的策略（串行或并行）发送各个分片数据块；
4. 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件。

前端大文件上传代码实现

• 在上传较大的文件时，将文件切割成多个小块，然后每次只发送一小块，等到全部传输完毕之后，服务端将接受的多个小块进行合并，组成上传的文件，这就是前端上传大文件的方式，也就是所谓的以流的方式上传。

1. html 创建

<div id="app">
  <form action="">
    <input type="file" name="" id="uploadInput" />
    <button id="uploadBtn">上传</button>
  </form>
</div>

2. 添加 onchange 事件

document.getElementById('uploadInput').addEventListener('change', handleFileChange);

let file = null;
// 文件被更改
function handleFileChange(event) {
  const file = event.target.files[0];
  if (!file) return;
  window.file = file;
}

3. 上传文件，创建切片

// 创建切片
const createFileChunks = function (file, size = 1024 * 100) {
  // 创建数组，存储文件的所有切片
  let fileChunks = [];
  for (let cur = 0; cur < file.size; cur += size) {
    // file.slice 方法用于切割文件，从 cur 字节开始，切割到 cur+size 字节
    fileChunks.push(file.slice(cur, cur + size));
  }
  return fileChunks;
};

• createFileChunks 方法接收两个参数

1. 要进行切片的文件对象

2. 切片大小，这里设置默认值为 1024*100，单位为字节

3. 拼接 formData

• 上传的时候，通过 formData 对象组装要上传的切片数据

/**
 * 2、拼接 formData
 * 参数1：存储文件切片信息的数组
 * 参数2：上传时的文件名称
 */
const concatFormData = function (fileChunks, filename) {
  /**
   * map 方法会遍历切片数组 fileChunks中的元素map 方法会遍历切片数组 fileChunks中的元素,
   * 数组中有多少个切片，创建几个 formData，在其中上传的文件名称、hash值和切片，并将此 formData
   * 返回，最终chunksList中存储的就是多个 formData(每个切片对应一个 formData)
   *
   */
  const chunksList = fileChunks.map((chunk, index) => {
    let formData = new FormData();
    // 这个'filename' 字符串的名字要与后端约定好
    formData.append('filename', filename);
    // 作为区分每个切片的编号，后端会以此作为切片的文件名称，此名称也应该与后端约定好
    formData.append('hash', index);
    // 后端会以此作为切片文件的内容
    formData.append('chunk', chunk);
    return {
      formData,
    };
  });
  return chunksList;
};

5. 上传切片

// 3、上传切片
const uploadChunks = async (chunksList) => {
  const uploadList = chunksList.map(({ formData }) =>
    axios({
      method: 'post',
      url: '/upload',
      data: formData,
    }),
  );
  await Promise.all(uploadList);
};

6. 合并切片

• 当所有切片都已经上传成功后，告诉后端一声

// 合并切片
const mergeFileChunks = async function (filename) {
  await axios({
    method: 'get',
    url: '/merge',
    params: {
      filename,
    },
  });
};

7. 方法组合

• 为上传按钮绑定单击事件

document.getElementById('uploadBtn').addEventListener('click', handleFileUpload);

• handleFileUpload 函数

// 大文件上传
async function handleFileUpload(event) {
  event.preventDefault();

  const file = window.file;
  if (!file) return;
  // 1、切片切割，第二个参数采用默认值
  const fileChunks = createFileChunks(file);
  // 2、将切片信息拼接成 formData 对象
  const chunksList = concatFormData(fileChunks, file.name);
  // 3、上传切片
  await uploadChunks(chunksList);
  // 4、所有切片上传成功后后，再告诉后端所有切片都已完成
  await mergeFileChunks(file.name);
  console.log('上传完成');
}