未捕获的类型错误：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

Question

我遇到了一个 javascript Filereader 问题，它返回错误 Uncaught TypeError: Failed to execute ‘readAsDataURL’ on ‘FileReader’: parameter 1 is not of type ‘Blob’。二分之一。有时它可以工作，但是当我重复该操作时，它会失败。

这是 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;">

这是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}
                    }
                }

以及对该函数的调用

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

任何想法 ？谢谢

原文由 Stéphane Joos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不需要创建一个 new Image 并且您应该监听 loadend 事件 —f1628d4096386f80e2683f5f5f93cf2709— 的事件 readAsDataURL 编码的字符串将为您提供方法 a,你的数据。

文件读取器.readAsDataURL()

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

还要确保您确实有一个文件，甚至可以检查 file.type 。既然你正在尝试用图像做某事，为什么不检查你是否有图像。这绝不是某种验证，但如果它不是图像，您可能不需要显示任何内容或执行任何操作。

这是一个例子。

 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" />

原文由 DavidDomain 发布，翻译遵循 CC BY-SA 3.0 许可协议