为什么我的FileReader无法从xmlhttprequest读取此数据URL

Question

    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)处失败。 我不知道为什么会这样。 我确定我也已经在FileReader函数中输入了数据URL。

Answer 1

你有两个问题

1. 您在错误的时间调用listenGetImageLoad 。 XMLHttpRequest是异步的。 因此，您需要在onload事件中调用它。

2. 即使纠正了异步问题，您也会将错误的事情传递给readAsDataURL() 。 它期望将blob或文件对象传递给它 ，而不是将其作为数据URL的字符串。

在加载事件中调用listenGetImageLoad ，以传递请求的响应以解决您的问题。

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

请注意，您无需使用readAsDataURL即可显示Blob中的图像。 只需调用传入Blob /文件中的URL.createObjectURL（）即可获取浏览器将能够加载的URL。 然后使用该网址设置图片的src。

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