从 FileReader() 返回字节数组

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

您可以使用 Promise 等待文件阅读器完成加载您的文件。

Promise 对象用于延迟和异步计算。 Promise 表示尚未完成但预计将来会完成的操作。

Here你可以找到更多关于promise的信息。

这是一个关于如何将承诺融入你的情况的示例。

(function (document) {
  var input = document.getElementById("files"),
      output = document.getElementById('output');

  // 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(fileData));
    // 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(fileData) {
  	return function(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>

Answer 2

如果您将onload 函数传递给该事件，则可以使其工作。

reader.onload = function(e){
    var arrayBuffer = e.target.result;
    var bytes = new Uint8Array(arrayBuffer);
    console.log(bytes);
}

这会将其从 reader.result 更正为 e.target.result;。

此外，使用fileData 时存在问题，将其设置为Blob[files[0]] 并将其发送至reader.readAsArrayBuffer。删除 fileData 并改为使用 reader.readAsArrayBuffer(input[0]); 调用它。