前端大文件上传优化方案——分片上传

介绍前端上传大文件的常见问题和解决方案，分片上传

这样可以避免一次性上传大文件导致的网络超时、内存溢出、进度不可控等问题。

要实现大文件分片上传，通常需要以下几个步骤：

1.通过DOM获取文件对象，并且对文件进行MD5加密（文件内容+文件标题形式），采用SparkMD5进行文件加密；

2.进行分片设置，利用Blob的slice方法进行文件分片处理，并且依次进行上传；

3.当分片文件上传完成后，请求合并接口后端进行文件合并处理即可。

一个简单的js代码示例如下：

// 获取input元素
var input = document.getElementById("file");
// 获取选择的第一个文件
var file = input.files[0];
// 设置每个分片大小为5MB
var chunkSize = 5 * 1024 * 1024;
// 计算总共有多少个分片
var totalChunks = Math.ceil(file.size / chunkSize);
// 定义一个数组存放所有的分片
var chunks = [];
// 遍历所有的分片
for (var i = 0; i < totalChunks; i++) {
  // 利用slice方法获取每个分片
  var start = i * chunkSize;
  var end = Math.min(file.size, start + chunkSize);
  var blob = file.slice(start, end);
  // 将每个分片添加到数组中
  chunks.push(blob);
}
// 定义一个变量存放当前正在上传的分片索引
var currentChunk = 0;
// 定义一个函数用于递归地上传每个分片
function upload() {
  // 如果当前索引等于总数，则说明所有分片都已经上传完成，请求合并接口即可
  if (currentChunk === totalChunks) {
    console.log("All chunks uploaded!");
    // 请求合并接口（省略）
    return;
  }
  // 获取当前要上传的分片对象
  var chunk = chunks[currentChunk];
  // 创建一个表单数据对象，添加相关信息（如MD5值、索引、总数等）
  var formData = new FormData();
  formData.append("file", chunk);
  formData.append("md5", file.md5); // 假设已经计算好了MD5值（省略）
  formData.append("index", currentChunk);
  formData.append("total", totalChunks);
  
   // 创建一个XMLHttpRequest对象，发送POST请求到服务器端（假设地址为/upload）
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "/upload");
   // 监听请求状态变化事件
   xhr.onreadystatechange = function () {
     if (xhr.readyState === XMLHttpRequest.DONE) {
       if (xhr.status ===200) {
         console.log("Chunk " + currentChunk + " uploaded!");
         // 如果成功，则递增索引，并继续调用upload函数
         currentChunk++;
         upload();
       } else {
         console.log("Upload failed!");
         // 如果失败，则重试或者提示错误信息（省略）
       }
     }
   };
   // 发送表单数据对象
   xhr.send(formData);
}
// 调用upload函数开始上传第一个分片
upload();

以上就是分片上传的核心思想和实现步骤，有什么问题欢迎指正。

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/13/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%bc%98%e5%8c%96%e6%96%b9%e6%a1%88-%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论