控制台中出现错误：参数不是Blob类型 [英] Error in the console: Parameter is not of type Blob

问题描述

 <脚本> 
 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。 / p>

解决方案 。onload属性来触发一个回调，当 readAsArrayBuffer （和其他FileReader方法）已经完成。下面的代码片段包含了一个如何与文件输入的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 =fileid =userFile/>< h4>文件数据：< / h4>< span id =result/>  / pre> 

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

This code produces this error in the console: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

To my understanding, a FileReader can accept both a Blob and File as a parameter because the File interface is based upon Blob.

解决方案

FileReader requires the use of it's .onload property to trigger a callback when readAsArrayBuffer (and other FileReader methods) has completed. The snippet below includes an example of how it could be used in tandem with the onChange event for a file input:

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

这篇关于控制台中出现错误：参数不是Blob类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！