确定最后一个文件块

Question

我正在尝试通过 rest 为大文件设置文件上传。下面的函数负责分块，但我需要能够识别最后一个块，因为我的休息调用更改为 /finishUpload() 以提交保存。

现在我只能确定 blob 何时为空，但我不知道如何确定 blob 为空之前的最后一次迭代。

这是我在下面用来解析我的文件的脚本。

export default function parseFile(file, options) {
  var opts       = typeof options === 'undefined' ? {} : options;
  var fileSize   = file.size;
  var chunkSize  = typeof opts['chunk_size'] === 'undefined' ?  64 * 1024 : parseInt(opts['chunk_size']);
  var binary     = typeof opts['binary'] === 'undefined' ? false : opts['binary'] == true;
  var offset     = 0;
  var self       = this; // we need a reference to the current object
  var readBlock  = null;
  var chunkReadCallback = typeof opts['chunk_read_callback'] === 'function' ? opts['chunk_read_callback'] : function() {};
  var chunkErrorCallback = typeof opts['error_callback'] === 'function' ? opts['error_callback'] : function() {};
  var success = typeof opts['success'] === 'function' ? opts['success'] : function() {};

  var onLoadHandler = function(evt) {
    if (evt.target.result == "") {
      console.log('Chunk empty, call finish');
      success(file);
      return;
    }

    if (evt.target.error == null) {
      chunkReadCallback(evt.target.result, offset).then(function() {
        offset += evt.target.result.length;
        readBlock(offset, chunkSize, file);
      });
    } else {
      chunkErrorCallback(evt.target.error);
      return;
    }
    if (offset >= fileSize) {
      success(file);
      return;
    }
  }

  readBlock = function(_offset, _chunkSize, _file) {
    var r = new FileReader();
    var blob = _file.slice(_offset, _chunkSize + _offset);
    console.log("blob size:", blob.size, "offset:", _offset, "C+S:",_chunkSize + _offset)
    r.onload = onLoadHandler;

    if (binary) {
      r.readAsArrayBuffer(blob);
    } else {
      r.readAsText(blob);
    }
  }
  readBlock(offset, chunkSize, file);
}

Codepen

Answer 1

为什么不依赖文件大小，即检查条件_chunkSize + _offset >= fileSize？

Answer 2

您可以使用progress、loadend 事件一次处理一个字节的File 对象；定义一个变量，在第 n 个字节、每第 n 个字节或文件处理期间的任何字节处暂停或停止处理。

var str = "abcdefghijklmnopqrstuvwxyz";
var type = "application/octet-stream";
var data = new Blob([], {
  type: type
});
var filename = "file.txt";
var reader = new FileReader();
var complete = false;
var beforeEnd = false;
var stopAt = str.length - 1;

function handleFile(e) {
  data = new File([data.slice()
                   , str.slice(data.size, data.size + 1)]
                   , filename, {
                       type: type,
                       lastModifiedDate: new Date()
          });
}

function handleRead(e) {
  if (data.size <= str.length && !complete) {
    if (data.size === stopAt && !beforeEnd) {
      beforeEnd = true;
      var r = new FileReader();
      r.onloadend = function() {            
        alert(`stopAt: ${stopAt}\n`
              +`data.size: ${data.size}\n`
              +`result at stopAt: ${r.result[stopAt -1]}`);
        reader.readAsArrayBuffer(data);
      }
      r.readAsText(data);
    } else {
      reader.readAsArrayBuffer(data)
    }
  } else {
    console.log("complete")
  }
}

function handleProgress(e) {
  if (data.size <= str.length && !complete) {
    var read = new FileReader();
    read.onload = function() {
      if (!complete) {
        console.log(read.result);
        if (read.result.length === str.length) {
          complete = true;
          console.log(data);
        }
      }
    }
    read.readAsText(data);
  }
}

reader.addEventListener("load", handleFile);

reader.addEventListener("loadend", handleRead);

reader.addEventListener("progress", handleProgress);

reader.readAsArrayBuffer(data);