HTML5 大文件断点续传完整思路整理

标签：断点续传 文件 接口 切片 HTML5 var 思路 spark MD5

用 html5 的新特性分割文件，为达到断点续传功能

用 spark.js 获取文件md5以确保文件的唯一性

流程概述:

  复制代码

  (此功能前端共需调用3个接口，分别为简称作 A / B / C)

  1，获取文件信息：使用HTML5的原生上传input，选择文件后，获取文件的所有信息（文件名、文件总字节数等）

  2，计算总切片：跟后台约定好单个切片大小，比如1M/片，计算文件总大小/单个切片大小=总切片数

  3，计算文件MD5和每个切片的MD5：引用spark-md5.min.js来生成MD5，此js的调用可以获取文件MD5、切片的MD5和切片的数据

  4，调用A接口查询从第几个切片开始上传：需要向后台传入的关键参数是文件名、文件总大小、文件的MD5

  5，获取到初始上传切片位置，正式开始分片上传到服务器：从A接口获取到切片位置后，调用接口B，将切片的MD5和切片数据传给后台，此后循环调用接口B，直到最后一切片上传结束

  6，所有切片上传结束后，调用接口C将文件存库

详细代码展示:

HTML：

  复制代码

<input type='file' title="" accept=".mp4" 
       name='myfiles' id="mediaFile" class="" onchange="handleFile()" />

获取文件信息：

  复制代码

function handleFile() {
     var fileInputs = $("input[name='myfiles']")[0]; //获取input里的文件信息
     //切割文件的每条内容分别存放
     var name = fileInputs.files[0].name, //文件名           
         size = fileInputs.files[0].size, //文件总字节 
         type = fileInputs.files[0].type, //文件类型 （此功能暂且用不到）
         shardSize = 1024 * 1024, // 每个切片的总字节数，比如此时以1M为一个分片
         shardCount = Math.ceil(size / shardSize); //总片数
}

计算整个文件的MD5：（前提是引入了spark.js，下载地址： js-spark-md5）

  复制代码

var singleFileData = new Array(); //初始空数组，储存所有的切片数据
var fileReader = new FileReader(),
   blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
   chunkSize = shardSize , //单个切片的总字节数
   chunks = shardCount, //总片数
   currentChunk = 0;
var spark = new SparkMD5.ArrayBuffer();
    fileReader.onload = function (e) {
    //*******获取分片文件，用于计算所有切片的MD5***
       for (var i = 0; i < chunks; i++) {
         var start = i * chunkSize,
         end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
         var sliceFile = blobSlice.call(file, start, end);
         // 调用此方法，计算每个切片的MD5
          getChunkMd5(sliceFile, i);
         }
    //*****************************
    spark.append(e.target.result);
    if (currentChunk < chunks) {
       currentChunk++;
       loadNext();
    } else {
      var allFileEnd = spark.end()
       console.log("此值为整个切片的MD5", allFileEnd)
       //真实MD5值 ：allFileEnd=a0ce27800ee7d948422f3fe16e898f22
       // ***调用接口(1),查询从第几个切片开始上传***
       // ***在此处写接口A的调用方法***
     }
    };
 function loadNext() {
  //计算切片的start,end，用于切割出切片的数据
  var start = currentChunk * chunkSize,
  end = start + chunkSize >= file.size ? file.size : start + chunkSize;
  fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
   //储存切片的数据
   //判断如果singleFileData小于总切片数，则继续往数组添加切片数据
   if (singleFileData.length != chunks) {
    singleFileData.push(blobSlice.call(file, start, end)) //将每个切片push到空数组里
   }
  };
  //调用此方法，循环获取切片数据
  loadNext()

计算切片的MD5：

（此步骤其实可以省略，但为了严谨后端需要根据前端传入的切片数据计算出MD5，跟前端传入的MD5对比）

  复制代码

    var mySingleFileMd5 = []; //用于储存所有切片的MD5
    function getChunkMd5(file, i) {
       var spark = new SparkMD5.ArrayBuffer();
       var fileReader = new FileReader();
       fileReader.onload = function (e) {
         spark.append(e.target.result);
         mySingleFileMd5[i] = spark.end();// 将每个切片的MD5存起来
         console.log("所有切片的MD5数组=", mySingleFileMd5);
       }
       fileReader.onerror = function () {
         console.warn('oops, something went wrong');
       }
       function loadNext() {
         fileReader.readAsArrayBuffer(blobSlice.call(file, 0, file.size));
       }
   loadNext();
  }

调用接口A后获取到 PARTINDEX（从第几个切片开始上传），接着调用接口B进行上传，上传后手动计算进度。

A接口传参、取参如下:

  复制代码

var params = {
          serviceid: 'wcm61_bigfile',
          methodname: 'startUpload',
          fileName: 手机QQ视频_20181212094958.mp4,
          fileDigest:  65309fc9684b4eb2f3d281da5ad17b6e,
          fileSize: 100904886,
        };
{
    "MSG":"操作成功",
    "DATA":{
        "TOTALPARTCOUNT":"49",
        "PARTINDEX":"1",  //此字段就是后台告诉前端从第几个切片开始上传
        "PARTSIZE":"2097152",
        "FLAG":"1",
        "FILENAME":"手机QQ视频_20181212094958.mp4"
     },
    "ISSUCCESS":"true"
}

B接口传参、取参如下：

  复制代码

  var data = singleFileData[partIndex - 1] //切片数据
  var fileName =手机QQ视频_20181212094958.mp4; //文件名
  var fileDigest = 65309fc9684b4eb2f3d281da5ad17b6e; //文件的MD5
  var partIndex = 1; //切片位置
  var partDigest = ea58e21870ad4c22f2c75645564654b2; //切片的MD5
{
    "filename":"手机QQ视频_20181212094958.mp4",
    "PARTINDEX":"2",  //下次开始传第2个切片
    "PARTSIZE":"2097152", //切片大小
    "totalPartCount":"49" //总切片数
    "ISSUCCESS":"1"
}

通过B接口，不断将切片上传到服务器，并且实时计算上传进度

  复制代码

var processNum = 
     parseInt((PARTINDEX - 1) / totalPartCount * 100)  // 已上传的切片/总切片数 

最终实现静态效果和接口如下：

 

 

参考文章：http://blog.ncmem.com/wordpress/2023/10/14/html5-%e5%a4%a7%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%e5%ae%8c%e6%95%b4%e6%80%9d%e8%b7%af%e6%95%b4%e7%90%86-2/

欢迎入群一起讨论

 

 

 

标签：断点续传,文件,接口,切片,HTML5,var,思路,spark,MD5
From： https://www.cnblogs.com/songsu/p/17763933.html