Determining the last file chunk

问题:

I'm trying to setup a file upload through rest for large files. The function below is taking care of chunking but I need to be able to recognize the last chunk because my rest call changes to /finishUpload() in order to commit the save.

Right now I'm only able to figure out when the blob is empty but I can't figure out how to determine the last iteration before the blob is empty.

This is the script I'm using below to parse my files.

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

回答1:

Why not rely on the filesize, i.e. check the condition _chunkSize + _offset >= fileSize?

回答2:

You can use progress, loadend events to process File object one byte at a time; define a variable where processing should be paused or stopped at nth byte, every nth byte, or any byte during processing of file.

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);