未捕获的TypeError：无法在'FileReader'上执行'readAsDataURL'：参数1不是'Blob'类型 [英] Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

问题描述

我遇到了一个javascript Filereader的问题，它返回错误Uncaught TypeError：无法在'FileReader'上执行'readAsDataURL'：参数1不是'Blob'类型。一两个。有时它会起作用，但是当我重复操作时，它会失败。

I've got a problem with a javascript Filereader which returns the error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. one in two. Sometimes it works, but when i repeat the operation, it fails.

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

Here's the javascript

这是一个div按钮，单击时，触发输入字段上的单击

It's a div button that, when clicked, triggers a click on the input field

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

调用文件Reader的函数

The function that calls the file 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);

有什么想法吗？谢谢

推荐答案

你不需要创建新图像而你应该正在侦听 readAsDataURL 方法的 loadend 事件，该方法将为您提供base64编码的数据字符串。

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.

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

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 。由于您尝试对图像执行某些操作，为什么不检查是否有图像。这绝不是某种验证，但如果它不是图像，您可能不需要显示任何内容或做任何事情。

Also make sure you actually have a file, and maybe even check the file.type. Since you are trying to do something with an image, why not check if you have an image. Which in no way is some kind of validation, but if it is not an image, you may not need to show anything or do anything.

这是一个例子。

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

这篇关于未捕获的TypeError：无法在'FileReader'上执行'readAsDataURL'：参数1不是'Blob'类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！