将axios响应转换为Blob url图像以在网站中显示/下载

13z8s7eq 于 2022-11-29 发布在 iOS

关注(0)|答案(1)|浏览(350)

我使用的是Egnyte API
我不明白响应对象是如何工作的，我试图将数据转换为Blob对象和URL。createObjectURL，但这对我不起作用。我不知道我是否可以显示这些图像到我的网站。
DOCS字节API：列出文件或文件夹
当我想下载图像时也会遇到这个问题，因为api响应返回纯加密文本，我不知道如何将其转换为对象以便使用javascript/html下载
DOCS字节API：下载文件

Axios从Egnyte API获取图像

const getImages = () => {
    axios.get(`${API}/${params.id}/images/`, config).then(res => {
        setImagesList(res.data.files)
    }).catch((error) => {
        console.log(error)
    })
}

响应如下所示：

将项目转换为Blob对象和URL。createObjectURL

const displayImg = (list_images) => {
    return list_images.map(img => {
        const url = URL.createObjectURL(new Blob([img]))
        return (
            <div className='div_img' key={img.name}>
                <img src={url} />
            </div>
        )
    })
}

URL对象如下所示：

但网站看起来：

来自API下载文件的响应：

如果有人能向我解释如何将API响应转换为图像对象，以便能够显示和下载它（以及要下载的文件），我将非常感激。

非常感谢！

axios

来源：https://stackoverflow.com/questions/72374474/convert-axios-response-to-blob-url-image-to-display-download-it-in-website

1条答案

按热度按时间

fcwjkofz1#

使用FileReader将blob转换为base64字符串，该字符串可以用作图像源（类似于data:image/png;base64,...）-这篇文章将向您展示如何实现：

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

https://stackoverflow.com/a/18650249/1143126
这个函数可以用来处理axios给出的结果，有点像这样：

axios.get(...) 
    .then(blobToBase64)
    .then(base64 => {
        // I'm assuming there is a variable 'imageSource' that is bound to the 'src' attribute of an HTML '<img>' somewhere
        imageSource = base64; 
    })
    .catch((error) => {
        // do error handling
    });

赞(0）回复(0）举报 2022-11-29

我来回答

将axios响应转换为Blob url图像以在网站中显示/下载

1条答案

相关问题

热门标签

最新问答