Javascript 参数不是“Blob”类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33923985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
parameter is not of type 'Blob'
提问by user3293692
I have written the code below to display the text from a local file using the file API but when I click the button, nothing happens. I get the following error when I inspect the element in the browser. What am I doing wrong?
我编写了下面的代码来使用文件 API 显示本地文件中的文本，但是当我单击按钮时，没有任何反应。在浏览器中检查元素时出现以下错误。我究竟做错了什么？
Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
未捕获的类型错误：无法在“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>采纳答案by Andrew Evt
To save the File content in innerHtml, you must first read the file. loadendevent fires only when file is fully read, and you can access its content without errors:
要将文件内容保存在 中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);
回答by Quentin
You've made a couple of errors.
你犯了几个错误。
The one that the error message is complaining about is that you are trying to select a file using a hard coded string. You cannot determine which file gets loaded. The File API will only allow you to read files that are selected by the uservia a File input.
错误消息抱怨的是您正在尝试使用硬编码字符串选择文件。您无法确定加载了哪个文件。File API 将只允许您读取用户通过 File 输入选择的文件。
The second is that you are trying to read the resultproperty of the reader beforeyou've read the file. You need an event handler to do that (because file reading, like Ajax, is asynchronous).
第二个是你在阅读文件之前试图阅读阅读器的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>回答by vapcguy
As the others said, I noticed that the onload event is what's missing.
正如其他人所说，我注意到缺少 onload 事件。
So I have a couple of different ways of showing how to make the reader do something, one for doing the readAsTextand one for getting the data as a base64 byte string using readAsDataURL, which is better, in my opinion, since you don't have to worry about Unicode and other weird question mark characters. To see them in action, just flip the call in the listener between uploadFile();and uploadFile1();. And I show a couple of different ways you can grab the file object, as well:
因此，我有几种不同的方式来展示如何让读者做某事，一种用于执行readAsText，另一种用于使用 将数据作为 base64 字节字符串获取readAsDataURL，在我看来，这是更好的，因为您不必担心 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>And normally I would think you should be able to just do:
通常我认为你应该能够做到：
<input type="button" onclick="uploadFile()" id="myBtn">Try it</button>
instead of having to add that listener, but it wasn't working in JSFiddle for some reason.
而不必添加该侦听器，但由于某种原因它在 JSFiddle 中不起作用。
