控制台中的错误：参数不是 Blob 类型

【问题标题】：Error in the console: Parameter is not of type Blob控制台中的错误：参数不是 Blob 类型
【发布时间】：2016-07-20 01:51:56
【问题描述】：

<script>
        var file = document.getElementById("userFile").files[0];
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        var byteArray = reader.result;
        console.log(byteArray);
</script>

此代码在控制台中产生此错误：无法在“FileReader”上执行“readAsArrayBuffer”：参数 1 不是“Blob”类型。

据我了解，FileReader 可以接受 Blob 和 File 作为参数，因为 File 接口基于 Blob。

【问题讨论】：

等待 DOM 加载？

标签： javascript file-io

【解决方案1】：

FileReader 需要使用它的.onload property 在readAsArrayBuffer（和其他 FileReader 方法）完成时触发回调。下面的 sn-p 包含一个示例，说明它如何与 onChange 事件一起用于文件输入：

const input = document.getElementById('userFile');
const reader = new FileReader();

input.onchange = function() {
  const file = input.files[0];
  reader.readAsArrayBuffer(file);
};

reader.onload = function() {
  const resultArray = new Int8Array(reader.result);
  document.getElementById('result').innerHTML = resultArray;
};

<input type="file" id="userFile"/>
<h4>File Data:</h4>
<span id="result"/>

【讨论】：