javascript - 未捕获的TypeError : Failed to execute 'readAsDataURL' on 'FileReader' : parameter 1 is not of type 'Blob'

我遇到了一个Javascript Filereader问题，该错误返回错误Uncaught TypeError:无法对'FileReader'执行'readAsDataURL':参数1不是'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;
    });

调用文件阅读器的功能

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

任何的想法 ？谢谢

最佳答案

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

FileReader.readAsDataURL()



还要确保您确实有一个文件，甚至可以检查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" />