Javascript 未捕获的类型错误：无法在“FileReader”上执行“readAsDataURL”：参数 1 的类型不是“Blob”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32508191/
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
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'
提问by Stéphane Joos
I've got a problem with a javascript Filereader which returns the error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. one in two. Sometimes it works, but when i repeat the operation, it fails.
我有一个 javascript Filereader 的问题，它返回错误 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'。二分之一。有时它有效，但是当我重复操作时，它失败了。
Here's the HTML
这是 HTML
<div id="upload-button" class="fpd-btn-raised fpd-secondary-bg-color fpd-secondary-text-color">
<i class="fpd-icon-file-upload"></i><span>Insérer votre image</span>
</div>
<input type="file" id="my-custom-design-upload" class="btn btn-success" style="display:none;">
Here's the javascript
这是javascript
It's a div button that, when clicked, triggers a click on the input field
这是一个 div 按钮，单击时会触发对输入字段的单击
$('#upload-button').click(function(){
$('#my-custom-design-upload').trigger('click');
return false;
});
The function that calls the file Reader
调用文件Reader的函数
function readfichier(e) {
if(window.FileReader) {
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var image = new Image;
image.src = e.target.result;
image.onload = function() {// Do something}
}
}
And the call to that function
以及对该函数的调用
document.getElementById('my-custom-design-upload').addEventListener('change', readfichier, false);
Any idea ? Thanks
任何的想法 ？谢谢
回答by DavidDomain
You do not need to create a new Imageand you should be listening for the loadendevent of the readAsDataURLmethod, which will provide you with a base64 encoded string of your data.
您不需要创建 anew Image并且您应该监听loadend该readAsDataURL方法的事件，这将为您提供一个 base64 编码的数据字符串。
FileReader.readAsDataURL()
FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a URL representing the file's data as a base64 encoded string.
readAsDataURL 方法用于读取指定 Blob 或 File 的内容。当读操作完成时，readyState 变为 DONE，并触发 loadend。那时，结果属性包含数据作为 URL，将文件数据表示为 base64 编码字符串。
Also make sure you actually have a file, and maybe even check the file.type. Since you are trying to do something with an image, why not check if you have an image. Which in no way is some kind of validation, but if it is not an image, you may not need to show anything or do anything.
还要确保您确实有一个文件，甚至可以检查file.type. 既然您正在尝试对图像做某事，为什么不检查您是否有图像。这绝不是某种验证，但如果它不是图像，您可能不需要显示任何内容或执行任何操作。
Here is an example.
这是一个例子。
var img = $('img');
img.css('display', 'none');
$('#upload-button').click(function(){
$('#my-custom-design-upload').trigger('click');
return false;
});
function readfichier(e) {
if(window.FileReader) {
var file = e.target.files[0];
var reader = new FileReader();
if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
} else {
img.css('display', 'none');
img.attr('src', '');
}
reader.onloadend = function (e) {
img.attr('src', reader.result);
img.css('display', 'block');
}
}
}
document.getElementById('my-custom-design-upload').addEventListener('change', readfichier, false);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="upload-button" class="fpd-btn-raised fpd-secondary-bg-color fpd-secondary-text-color">
<i class="fpd-icon-file-upload"></i><span>Insérer votre image</span>
</div>
<input type="file" id="my-custom-design-upload" class="btn btn-success" style="display:none;" />
<img src="" height="200" />回答by russiansummer
i was getting a similar error when i would click the input but then instead of choosing an attachment, clicking cancel. so if I just wrapped the readAsDataURL call with an if statement checking if the file existed, it fixed it. see below.
当我单击输入时，我遇到了类似的错误，但不是选择附件，而是单击取消。所以如果我只是用 if 语句检查文件是否存在来包装 readAsDataURL 调用，它就会修复它。见下文。
onSelectFile(event) {
let reader = new FileReader();
reader.onload = function(){
let output: any = document.getElementById('blah');
output.src = reader.result;
}
if(event.target.files[0]){
reader.readAsDataURL(event.target.files[0]);
}
}
回答by Shehzad Aslam
You have to trigger change event on input field. then you will receive file.
您必须在输入字段上触发更改事件。然后你会收到文件。
$('#upload-button').click(function(){
$('#my-custom-design-upload').trigger('change');
return false;
});
回答by Yunus Yeniocak
You need to make sure file has a value (not undefinedor null).
您需要确保文件具有值（不是undefined或null）。
At the top of imageFunction:
在顶部imageFunction：
if(!file) {
// handle error condition and return
}
