Почему моя программа чтения файлов не может прочитать этот URL-адрес из xmlhttprequest - PullRequest
Новая
       41

Почему моя программа чтения файлов не может прочитать этот URL-адрес из xmlhttprequest

0 голосов
/ 08 ноября 2018 
    let MY_URL = "*"
    let DataURL;

    // basic JS way of getting the info from S3
    let request = new XMLHttpRequest();
    request.open('GET', MY_URL, true);
    request.responseType = 'blob';
    request.onload = function() {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload =  function(e){
            DataURL = e.target.result;
        };
    };
    request.send();

    listenGetImageLoad(DataURL);

Здесь я получаю URL-адрес данных файла, получаемого из Интернета.Затем я хочу прочитать его в fileReader, но продолжаю получать сообщение об ошибке: 

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Мой код для fileReader выглядит следующим образом: * 

const listenGetImageLoad = (DataURL) => {

    const imageArray = Object.keys(images)

    let async = imageArray.length

    for (let image in images) {
        const reader = new FileReader()

        reader.addEventListener("load", () => {
            const imageObject = new Image()

            imageObject.addEventListener("load", (event) => {...})

        reader.readAsDataURL(DataURL)
    }
}

Эта функция, кажется,сбой на reader.readAsDataURL(DataURL).Я понятия не имею, почему это так.Я так уверен, что я также ввел URL данных в функцию FileReader.

1 Ответ

0 голосов
/ 08 ноября 2018

У вас две проблемы

  1. Вы звоните listenGetImageLoad не в то время. XMLHttpRequest является асинхронным. Поэтому вам нужно вызвать это внутри вашего события onload.

  2. Даже когда вы исправляете проблему асинхронности, вы передаете неправильную вещь на readAsDataURL(). Ожидается, что объект BLOB или файл будет передан , а не строка, представляющая собой URL-адрес данных.

Звоните listenGetImageLoad внутри события загрузки, передавая ответ на запрос, чтобы исправить вашу проблему. 

request.onload = function() {
  listenGetImageLoad(request.response);
};

Обратите внимание, что вам не нужно использовать readAsDataURL, чтобы показать изображение из BLOB-объекта. Просто вызовите URL.createObjectURL () , передав в BLOB-файл / файл, чтобы получить URL, который браузер сможет загрузить. Затем установите источник изображения с этим URL. 

request.onload = function() {
  var url = URL.createObjectURL(request.response);
  yourImage.src = url;
};
...