为什么我的文件读取器无法从 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) 失败。我不知道为什么会这样。我非常确定我也已将数据 URL 输入到 FileReader 函数中。

Answer 1

你有两个问题

您打错电话了listenGetImageLoad。 XMLHttpRequest 是异步的。所以你需要在你的 onload 事件中调用它。
即使您更正了异步问题，您也会将错误的内容传递给 readAsDataURL()。 It expects a blob or file object to be passed to it，不是数据 url 所代表的字符串。

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

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

请注意，您不需要使用 readAsDataURL 来显示来自 blob 的图像。只需调用 URL.createObjectURL() 传递 blob/file 即可获得浏览器能够加载的 url。然后用 url.

设置图像的 src

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

为什么我的文件读取器无法从 xmlhttprequest 中读取此数据 url

Why can't my filereader read this data url from a xmlhttprequest

javascript

xmlhttprequest

filereader

data-uri