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

Question

我有一个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;
    });

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

You do not need to create a new Image and you should be listening for the loadendevent of the readAsDataURLmethod, which will provide you with a base64 encoded string of your data.

FileReader.readAsDataURL()

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a URL representing the file's data as a base64 encoded string.

还要确保你确实有一个文件,甚至可以检查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]);
    }
}