参数不是 'Blob' 类型

Question

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

Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type '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>

Answer 1

要在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 - and here

Answer 2

你犯了几个错误。

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

第二个是您在阅读文件之前尝试阅读reader的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>

Answer 3

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

所以我有几种不同的方法来展示如何使 reader 做某事，一种用于执行 readAsText，另一种用于使用 [= 将数据作为 base64 字节字符串获取14=]，这在我看来更好，因为您不必担心 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/

Answer 4

嗯！不确定其他人，但就我而言，它是通过使用 fileObjects[0].file

解决的

查看它的一个好方法是在控制台中打印 'files' 或 'fileObjects'，然后查看最后是否需要 .file。

参数不是 'Blob' 类型

parameter is not of type 'Blob'

html

javascript

fileapi