使用ajax实现大文件分片上传

// 有时候服务器无法返回我们需要的数据类型, 但客户端不知道服务器无法返回, 所以就算xhr.responseType设置了想拿的数据类型, 但也拿不到, 而且xhr.response使用xhr.responseType设置的值来解析一个非xhr.responseType类型的值, 此时就会发生问题.overrideMimeType替代responseType

const uploadFile =(file,size) =>  {
//每片1M大小
var chunkSize = 1024 * 1024 * size;
//文件大小
var totalSize = file.size;
 //分片总数
var chunkQuantity = Math.ceil(totalSize / chunkSize); 
//偏移量
var offset = 0; 

var reader = new FileReader();

reader.onload = function (e) {

var xhr = new XMLHttpRequest();

xhr.open("POST", url);

xhr.overrideMimeType("application/octet-stream");

xhr.onreadstatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    ++offset;
    if (offset === chunkQuantity) {
      alerrt("上传完成");
    } else if (offset === chunckQuantity - 1) {
      blob = file.slice(offset * chunkSize, totalSize);
      // 再次读取文件触发onload事件
      reader.readAsBinaryString(blob);
    } else {
      blob = file.slice(offset * chunkSize, (offset + 1) * chunckSize);
      // 再次读取文件触发onload事件
      reader.readAsBinaryString(blob);
    }
  } else {
    alert("上传出错");
  }
}
// 避免sendAsBinary不存在导致报错
if (!xhr.prototype.sendAsBinary) {
  xhr.prototype.sendAsBinary = function (datastr) {
    function byteValue(x) { return x.charCodeAt(0) & 0xff; }
    var ords = Array.prototype.map.call(datastr, byteValue);
    var ui8a = new Uint8Array(ords);
    this.send(ui8a.buffer);
  }
}
}
var blob = file.slice(0, chunkSize);reader.readAsBinaryString(blob);
}复制代码