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

【问题标题】：Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'未捕获的 TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型
【发布时间】：2015-12-07 02:43:02
【问题描述】：

我遇到了一个 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);

有什么想法吗？谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

FileReader.readAsDataURL()

readAsDataURL 方法用于读取指定 Blob 或 File 的内容。当读操作完成后，readyState 变为 DONE，并触发 loadend。那时，result 属性包含数据作为 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" />

【讨论】：

【解决方案2】：

当我单击输入但没有选择附件，而是单击取消时，我遇到了类似的错误。因此，如果我只是用 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]);
    }
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您需要确保文件有一个值（不是undefined 或null）。

在imageFunction的顶部：

if(!file) {
    // handle error condition and return
}

【讨论】：