javascript - 未捕获的 TypeError：无法在“FileReader”上执行“readAsText”：参数 1 不是“Blob”类型

Question

我编写了一个从文件中读取 HTML 的函数，并将某个 div 的 innerHTML 设置为等于文件内的 HTML，作为一种保存/加载系统。这曾经可以正常工作，但是在浏览器更新后，我收到了标题中的错误。

HTML：

<div id="target">
    <button onclick="saveDiv()">Save</button>
    <button onclick="loadDiv()">Load</button>
    <input id="file" type="file" style="hidden">
    <input>
</div>

JS：

const div = document.getElementById('target')
function saveDiv() {
    var divContent = div.innerHTML.toString();
    var ran = (Math.random() + 1).toString(36).substr(2, 8)
    var fileName = `${ran}.txt`;
    download(fileName, divContent);
}
function download(name, content) {
    var e = document.createElement('a');
    e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
    e.setAttribute('download', name);
    e.style.display = 'none';
    document.body.appendChild(e);
    e.click();
    document.body.removeChild(e);
}
function loadActors() {
    document.getElementById('file').click();

    var file = document.getElementById('file').files[0];
    var r = new FileReader();

    r.onload = (function(reader) {
        return function() {
            var contents = reader.result;
            div.innerHTML = contents;
        }
    })(r);

    r.readAsText(file);
}

我认为可能发生的情况是 FileReader 试图在用户选择文件之前读取文件，但我不确定。有人知道这里可能会发生什么吗？

编辑：似乎如果我在错误后选择文件然后再次单击加载按钮它运行正常。我如何让它只在用户选择文件后运行？

标签： javascripthtml