javascript エラー「Uncaught TypeError: Failed to execute ‘readAsText’ on ‘FileReader’: parameter 1 is not of type ‘Blob’.」が発生した場合の解決方法

作成日 2022.07.25
更新日 2022.07.26
javascript
javascript

javascriptで、readAsTextを利用してエラー「Uncaught TypeError: Failed to execute ‘readAsText’ on ‘FileReader’: parameter 1 is not of type ‘Blob’.」が発生した場合の対処法を記述してます。

1. 環境
2. エラー全文
3. 原因
4. 解決方法

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

エラー全文

以下のコードで発生。

<script>

let read = new FileReader();

read.readAsText('test.txt');

</script>

エラー全文

Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

画像

firefox 102 では以下のエラーとなります。

Uncaught TypeError: FileReader.readAsText: Argument 1 is not an object.

画像

原因

「FileReader」の「readAsText」に指定する値は「Blob」である必要があるため

解決方法

「input」の「type=file」からファイルを選択して、読み込む

※読み込むテキストファイル「test.txt」の内容

コード

<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>

実行結果