NEW ARTICLE
kotlin 正規表現を使用して文字列が部分一致で含まれているかを判定する
  1. HOME
  2. javascript
  3. javascript エラー「TypeError: Argument 1 ('blob') to FileReader.readAsText must be an instance of Blob」の解決方法

javascript エラー「TypeError: Argument 1 (‘blob’) to FileReader.readAsText must be an instance of Blob」の解決方法

javascript エラー「TypeError: Argument 1 (‘blob’) to FileReader.readAsText must be an instance of Blob」の解決方法

javascriptで、FileReaderのreadAsTextを利用してエラー「TypeError: Argument 1 (‘blob’) to FileReader.readAsText must be an instance of Blob」が発生した場合の対処法を記述してます。

目次

環境

  • OS macOS Big Sur
  • ブラウザ safari 15.5
Javascript サンプル集はこちら

エラー全文

以下のコードで発生。

<script>

let read = new FileReader();

read.readAsText('test.txt');

</script>

エラー全文

TypeError: Argument 1 ('blob') to FileReader.readAsText must be an instance of Blob

画像

原因

「FileReader」の「readAsText」の引数に指定する値は「Blob」なため

解決方法

「input」要素の「type=file」から取得する。
※ここでは以下のファイルを読み込みます。

<input type="file" id="f">
<button id="btn">button</button>
<div id="result"></div>

<script>

let read = new FileReader();

read.readAsText('test.txt');

document.getElementById("btn").addEventListener("click", function () {

    let read = new FileReader();

    read.readAsText(document.getElementById('f').files[0]);

    read.addEventListener('load', function () {
        document.getElementById('result').innerText = this.result;
    });

});

</script>

実行結果