未捕获的类型错误：无法在“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);

任何的想法 ？ 谢谢

Answer 1

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

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

Answer 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]);
    }
}

Answer 3

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

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

Answer 4

您需要确保 file 具有值（不是undefined或null ）。

在imageFunction的顶部：

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