Return 来自 FileReader() 的字节数组

Question

我需要一些帮助return将下面这个函数的 "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);
}

我想获取上述函数的 return 并在另一个函数中使用字节数组作为输入参数。

Answer 1

您可以使用 promises 等待文件 reader 完成文件加载。

The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected to in the future.

Here 您可以找到更多关于 promises 的信息。

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

(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;。

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

Return 来自 FileReader() 的字节数组

Return the Array of Bytes from FileReader()

javascript

filereader