从FileReader()返回Bytes数组

Question

我需要一些帮助从下面的函数返回"bytes"变量,以用作另一个函数的输入.

function openfile() {
var input = document.getElementById("files").files;
var fileData = new Blob([input[0]]);

var reader = new FileReader();
reader.readAsArrayBuffer(fileData);
reader.onload = function(){
    var arrayBuffer = reader.result
    var bytes = new Uint8Array(arrayBuffer);
    console.log(bytes);
}

我想得到上面函数的返回,并在另一个函数中使用字节数组作为输入参数.

Answer 1

您可以使用promises等待文件阅读器完成加载文件.

的无极对象用于延迟和异步计算.Promise表示尚未完成的操作,但预计将在未来完成.

在这里,您可以找到有关承诺的更多信息.

以下是如何将承诺整合到您的情况中的示例.

(function (document) {
  var input = document.getElementById("files"),
      output = document.getElementById('output'),
      fileData; // We need fileData to be visible to getBuffer.

  // Eventhandler for file input. 
  function openfile(evt) {
    var files = input.files;
    // Pass the file to the blob, not the input[0].
    fileData = new Blob([files[0]]);
    // Pass getBuffer to promise.
    var promise = new Promise(getBuffer);
    // Wait for promise to be resolved, or log error.
    promise.then(function(data) {
      // Here you can pass the bytes to another function.
      output.innerHTML = data.toString();
      console.log(data);
    }).catch(function(err) {
      console.log('Error: ',err);
    });
  }

  /* 
    Create a function which will be passed to the promise
    and resolve it when FileReader has finished loading the file.
  */
  function getBuffer(resolve) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(fileData);
    reader.onload = function() {
      var arrayBuffer = reader.result
      var bytes = new Uint8Array(arrayBuffer);
      resolve(bytes);
    }
  }

  // Eventlistener for file input.
  input.addEventListener('change', openfile, false);
}(document));

<input type="file" id="files" />
<div id="output"></div>