参数不是“Blob”类型答案

【问题标题】：parameter is not of type 'Blob'参数不是“Blob”类型
【发布时间】：2015-11-25 18:31:52
【问题描述】：

我已经编写了下面的代码来使用文件 API 显示本地文件中的文本，但是当我单击按钮时，没有任何反应。在浏览器中检查元素时出现以下错误。我做错了什么？

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

<!DOCTYPE html>
    <html>
    <body>

    <p>This example uses the addEventListener() method to attach a click event to a button.</p>

    <button id="myBtn">Try it</button>
    <pre id="file"></pre>

    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
       var file = "test.txt"
       var reader = new FileReader();

       document.getElementById('file').innerText = reader.result;
   
       reader.readAsText(file);

    });
    </script>

    </body>
    </html>

【问题讨论】：

typeof file == "string" // true

标签： javascript html fileapi

【解决方案1】：

你犯了几个错误。

错误消息抱怨的一个是您正在尝试使用硬编码字符串选择文件。 您无法确定加载了哪个文件。 File API 仅允许您通过 File 输入读取用户选择的文件。

第二个是您在阅读文件之前尝试读取阅读器的result 属性。您需要一个事件处理程序来执行此操作（因为文件读取，如 Ajax，是异步的）。

document.getElementById("myBtn").addEventListener("click", function() {

  var reader = new FileReader();
  reader.addEventListener('load', function() {
    document.getElementById('file').innerText = this.result;
  });
  reader.readAsText(document.querySelector('input').files[0]);

});

<input type="file">
<button id="myBtn">Try it</button>
<pre id="file"></pre>

【讨论】：

【解决方案2】：

要将文件内容保存在innerHtml 中，您必须先读取文件。 loadend 事件仅在文件被完全读取时触发，并且您可以访问其内容而不会出错：

var reader = new FileReader();
var fileToRead = document.querySelector('input').files[0];

// attach event, that will be fired, when read is end
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
   // we insert content of file in DOM here
   document.getElementById('file').innerText = reader.result;
});

// start reading a loaded file
reader.readAsText(fileToRead);

你可以阅读更多here - 和here

【讨论】：

如果想把它读入一个变量怎么办？我们是否必须明确地将其转储到 innerText 中？
别忘了.files[0];
loadend 用于加载成功与否。您只能使用“加载”事件来成功读取操作

【解决方案3】：

正如其他人所说，我注意到缺少 onload 事件。

所以我有几种不同的方法来展示如何让读者做某事，一种用于执行readAsText，另一种用于使用readAsDataURL 将数据作为base64 字节字符串获取，这更好，在我的意见，因为您不必担心 Unicode 和其他奇怪的问号字符。要查看它们的实际效果，只需在 uploadFile(); 和 uploadFile1(); 之间切换侦听器中的调用。我还展示了几种获取文件对象的不同方法：

document.getElementById("myBtn").addEventListener("click", function() {
  uploadFile1();
}); 

function uploadFile1(){
  var f = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsText(f); 
}

function uploadFile(){
  var f = document.querySelector('input').files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsDataURL(f); 
}

function processFile(theFile){
  return function(e) { 
    // Use the .split I've included when calling this from uploadFile()
    var theBytes = e.target.result; //.split('base64,')[1]; 
    document.getElementById('file').innerText = theBytes;
  }
}

<input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

通常我认为你应该能够做到：

<input type="button" onclick="uploadFile()" id="myBtn">Try it</button>

而不是必须添加该侦听器，但由于某种原因它在 JSFiddle 中不起作用。

https://jsfiddle.net/navyjax2/heLmxegn/1/

【讨论】：

【解决方案4】：

好吧！不确定其他人，但在我的情况下，它是通过使用 fileObjects[0].file

解决的

查看它的一个好方法是在控制台中打印您的“文件”或“文件对象”，然后查看最后是否需要 .file。

【讨论】：