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

Question

Проблема с FileReader в JavaScript:

Я столкнулся с ошибкой 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;
});

Функция, которая вызывает FileReader:

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

Я получал похожую ошибку, когда щелкал по полю ввода, но вместо выбора вложения нажимал "Отмена". Решением стало обернуть вызов 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]);
    }
}

Таким образом, если файл не выбран, вызов readAsDataURL не произойдет, и ошибка будет устранена.

Answer 2

Чтобы убедиться, что переменная file содержит значение (не является undefined или null), вы можете добавить проверку в начале функции imageFunction. Пример кода может выглядеть так:

function imageFunction(file) {
    if (!file) {
        // Обработайте ошибку и вернитесь из функции
        console.error("Файл не задан!");
        return; // или другое действие для обработки ошибки
    }
    
    // Продолжение выполнения функции, если файл корректен
}

Эта проверка позволит вам избежать ошибок, связанных с попытками работы с несуществующим файлом.

Answer 3

Чтобы вызвать событие изменения на поле ввода, вы можете использовать метод trigger. Например, если у вас есть кнопка, которая запускает загрузку файла, вы можете написать следующий код:

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

С помощью этого кода при нажатии на кнопку с идентификатором upload-button будет инициировано событие change на элементе с идентификатором my-custom-design-upload. Это событие позволит вам обработать файл после его выбора. Убедитесь, что у вас установлен обработчик события change для поля ввода, чтобы корректно обработать загруженный файл.

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

3 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных