NEW ARTICLE
kotlin 「if」文を使用する
  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>

実行結果