web-dev-qa-db-ja.com

FileReader（）からバイトの配列を返す

別の関数の入力として使用するために、この関数から「バイト」変数を返すためにいくつかの助けが必要です。

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

上記の関数の戻り値を取得し、別の関数の入力パラメーターとしてバイトの配列を使用したいと思います。

javascriptfilereader
6
Hugo .L

Promiseを使用して、ファイルリーダーがファイルの読み込みを完了するまで待つことができます。

Promiseオブジェクトは、遅延計算と非同期計算に使用されます。 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>
10
DavidDomain

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]);で呼び出します。

3
Jacob Valenta