Uncaught TypeError: Не удалось выполнить 'readAsDataURL' в 'FileReader': параметр 1 не относится к типу 'Blob'

У меня проблема с фильтром javascript Filereader, который возвращает ошибку Uncaught TypeError: Не удалось выполнить 'readAsDataURL' в 'FileReader': параметр 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);

Любая идея? Благодаря

Ответ 1

Вам не нужно создавать new Image, и вы должны слушать событие loadend метода readAsDataURL, которое предоставит вам строку с кодировкой base64 ваших данных.

FileReader.readAsDataURL()

Метод readAsDataURL используется для чтения содержимого указанного Blob или File. Когда операция чтения будет завершена, readyState станет DONE, и действие будет активировано. В то время атрибут 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

Я получал аналогичную ошибку, когда я нажимал на вход, но вместо этого выбирал вложение, нажав кнопку "Отмена". поэтому, если я просто завернул вызов readAsDataURL с помощью инструкции if, проверяющей, существовал ли файл, он исправил его. см. ниже.

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