未捕获的TypeError：无法在’FileReader’上执行’readAsDataURL’：参数1不是’Blob’类型

我有一个javascript Filereader的问题，它返回错误Uncaught TypeError：无法在’FileReader’上执行’readAsDataURL’：参数1不是’Blob’类型。 一两个。 有时它可以工作，但是当我重复操作时，它会失败。

这是HTML

 Insérer votre image 
  

这是javascript

这是一个div按钮，单击该按钮会触发输入字段上的单击

 $('#upload-button').click(function(){ $('#my-custom-design-upload').trigger('click'); return false; }); 

调用文件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} } } 

以及对该function的调用

 document.getElementById('my-custom-design-upload').addEventListener('change', readfichier, false); 

任何的想法 ？ 谢谢

Answer 1

您不需要创建new Image ，您应该监听readAsDataURL方法的loadend事件，该事件将为您提供base64编码的数据字符串。

FileReader.readAsDataURL（）

readAsDataURL方法用于读取指定Blob或File的内容。 当读取操作完成时，readyState变为DONE，并且触发loadend。 此时，result属性包含数据作为URL，表示文件的数据为base64编码的字符串。

还要确保你确实有一个文件，甚至可以检查file.type 。 由于您尝试对图像执行某些操作，因此请不要检查是否有图像。 这绝不是某种validation，但如果它不是图像，您可能不需要显示任何内容或做任何事情。

这是一个例子。

 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); 

  
 Insérer votre image 
   

Answer 2

当我点击输入时我得到了类似的错误但是然后点击取消而不是选择附件。 所以，如果我用read语句包装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]); } } 

Answer 3

您必须在输入字段上触发更改事件。 然后你会收到档案。

 $('#upload-button').click(function(){ $('#my-custom-design-upload').trigger('change'); return false; });