首页 文章

Javascript,用Promises拼接FileReader的大文件,怎么样?

提问于
浏览
0

我正在尝试使用FileReader使用promises顺序读取多个文件 . 问题是我需要将读取操作分成几个块来使它们可行 . 通过这样做,我失去了Promise链 . 这是在下面的代码中发生的,我得到控制台日志 here ,然后是 catched (意思是我丢失了链),然后是 inside 然后是 finished . 不知何故,上传中的承诺不受尊重 .

这是代码(请转到上一次编辑,我保留原始文本)

var reader = new FileReader();
reader.onloadend = function(e) {
  if (e.target.readyState == 2) {
    console.log('inside')
    start = temp_end;
    temp_end = start + BYTES_PER_CHUNK;
    if (temp_end > end) temp_end = end;
    upload();
  }
};

Array.reduce(function(promise, item) {
  start = 0;
  temp_end = start + BYTES_PER_CHUNK;
  end = parseInt(totalsize);
  if (temp_end > end) temp_end = end;
  uploading_file = item;
  return upload()
  .then(function(){
    console.log('not shown');
  })
  .catch(console.log('catched'));
},0);

function upload() {
  return new Promise(function(resolve,reject) {
    if (start < end) {
      console.log('here')
      var chunk = uploading_file.slice(start, temp_end);
      reader.readAsBinaryString(chunk);
    } else {
      console.log('finished')
      uploading_file = null;
      resolve();
    }
  }
}

EDIT1:我正在尝试的新代码,仍然是console.log stop 1 出现在 uploadhere 2 之前

var start = 0;
        var temp_end = start + BYTES_PER_CHUNK;
        var end = parseInt(item.size);
        if (temp_end > end) temp_end = end;
        uploading_file = item;
        console.log('here 1')
        Promise.resolve().then(function() {
            return upload();
        })
        .then(function(){
            console.log('here 2')
        })
        .catch(console.log('stop 1'));

        function upload() {
            console.log('upload')
            if (start < end) {
                var chunk = uploading_file.slice(start, temp_end);
                var reader = new FileReader();
                reader.readAsArrayBuffer(chunk);
                reader.onload = function(e) {
                    if (e.target.readyState == 2) {
                        start = temp_end;
                        temp_end = start + BYTES_PER_CHUNK;
                        if (temp_end > end) temp_end = end;
                        return upload();
                    }
                }
            } else {
                console.log('finished')
                uploading_file = null;
                return Promise.resolve();
            }
         }

EDIT2:由于缺少函数(),因此存在catch日志 . 以下代码似乎有效,但我看不到我最后感兴趣的值 content .

console.log说,问题是承诺确实在这里不起作用

here 1
here 2
here 4
here 3

代码:

var item; // item is a file
        var BYTES_PER_CHUNK = 100000;
        var start = 0;
        var temp_end = start + BYTES_PER_CHUNK;
        var end = parseInt(item.size);
        if (temp_end > end) temp_end = end;
        var content = ''; // to be filled by the content of the file
        var uploading_file = item;
console.log('here 1');
        Promise.resolve().then(function() {
console.log('here 2');
            return upload();
        })
        .then(function(content){
console.log('here 4');
            console.log(content); // this is empty (!!)
        })
        .catch(function(){
            console.log('stop 1')
        });

        function upload() {
            if (start < end) {
                var chunk = uploading_file.slice(start, temp_end);
                var reader = new FileReader();
                reader.readAsArrayBuffer(chunk);
                reader.onload = function(e) {
                    if (e.target.readyState == 2) {
                        content += new TextDecoder("utf-8").decode(e.target.result);
                        start = temp_end;
                        temp_end = start + BYTES_PER_CHUNK;
                        if (temp_end > end) temp_end = end;
                        return upload();
                    }
                }
            } else {
                uploading_file = null;
                console.log(content); // it shows the content of the file
console.log('here 3');
                return Promise.resolve(content);
            }
        }

1 回答

  • 1

    您的 upload() 函数并不总是返回Promise . 它在else条件下执行,但if条件在回调内部没有't. You have a return statement, but it',因此 upload 的调用者不会接收它 .

    尝试将其更改为:

    function upload() {
      if (start < end) {
        return new Promise(function (resolve, reject) {
          var chunk = uploading_file.slice(start, temp_end);
          var reader = new FileReader();
          reader.readAsArrayBuffer(chunk);
          reader.onload = function(e) {
            if (e.target.readyState == 2) {
              content += new TextDecoder("utf-8").decode(e.target.result);
              start = temp_end;
              temp_end = start + BYTES_PER_CHUNK;
              if (temp_end > end) temp_end = end;
              resolve(upload());
            }
          }
        });
      } else {
        uploading_file = null;
        console.log(content); // it shows the content of the file
        return Promise.resolve(content);
      }
    }
    

    现在, upload 总是返回一个Promise而不是 undefined .

相关问题