在工作中，前端上传视频或者大文件的时候，由于文件过大，上传时间过长，我们需要对文件进行一个切片的处理，然后上传片数，最后由后端整合，但是也有一些视频类的文件会被防火墙拦截，这就需要我们转化成base64格式上传了，

        首先我们要知道，文件是以Blob的数据类型存在的，Blob有一个特点，就是支持分割，

关于Blob可以参考Blob - Web API 接口参考 | MDN来理解

先上一段简单的代码

 //首先是切割文件
  var blob = file;
  var arr=[]
  const ChunkSize = 1024 * 1024 * 2; 
  const Size = blob.size;
  var start = 0;
  var end = ChunkSize;
  while(start < Size) {
    arr.push(blob.slice(start, end))
    start = end;
    end = start + ChunkSize;
  }
  arr.map((itm,idx)=>{

        //转化base64格式
    BlobToBase64(itm).then((res)=>{
    upload(res)//上传文件
    })
  })

 关于文件转base64的方法可以参考FileReader属性，支持文件的读取和数据的转换，需要注意的一点就是，转化是异步的，有时候可能会用async或者promise处理一下，详情可参考FileReader - Web API 接口参考 | MDN 

下面是我配好的转化方法 

function BlobToBase64(blob) {
    return new Promise(function (resolve) {
      const reader = new FileReader()
      reader.readAsDataURL(blob)
      reader.onload = function () {
        resolve(this.result)
      }
    })
  }

 最后需要的就是上传了，我们使用XMLHttpRequest()进行上传，这个大家应该都了解，我就直接上代码了

 //上传
  function upload(blobFile) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.send(blobFile);
  }

         这样就是一个简单的切片转base64上传了，可能后端会有文件大小限制，这个就需要后端进行修改，当然这只是一个简单的练习，旨在让大家了解一下上传过程。

但是，在项目中我们往往不是这么简单，在项目中正常的流程一般是：

//后端提供三个接口

1.初始化上传数据，对数据进行一个初始化

2.初始化完成之后就需要对文件进行一个切片上传，具体上传方法需要根据需求自定（包括切割大小，张贴方法，并发次数，重新上传次数，请求头的处理，cookie和token的携带......）

3.上传完成之后，通知后端进行整合处理

如果完成上面所述功能，纯js手写可能会浪费大量时间，这里我发现一个*，可以直接拿来用，

@flowjs：https://github.com/flowjs/flow.js

hub下面有所需的参考文档，基本详细