jquery Blazor服务器:将本地存储在浏览器中的blob转换为Base64 String

rjee0c15  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(86)

我正在Blazor Server Net 6中创建应用程序
我能够通过浏览文档将图像保存为本地浏览器上的blob
https://learn.microsoft.com/en-us/aspnet/core/blazor/images?view=aspnetcore-7.0#stream-image-data
图片在浏览器x1c 0d1x中呈现完美
Blob URL如下所示
blob:http://本地主机:7066/94065 f17 - 5 b19 - 47 e4 -9256
现在,我需要将blob作为一个base 64字符串读取。我尝试使用IHTTPClient,如下所述

var result=await httpClient.GetStreamAsync(_card.LogoImageDetails.ActualImage);

字符串
但是,它会抛出

下面给出的异常
正在等待一个有效的解决方案来解决此问题
谨致问候
萨阿德

gzjq41n4

gzjq41n41#

下面是解决方案
创建了像这样的JS方法:

const blobToBase64 = async blob => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result)
        reader.error = (err) => reject(err)
        reader.readAsDataURL(blob)
    })
}

window.convertBlobURLToBase64 = async (url) => {
    const response = await fetch(url)
    const blob = await response.blob();
    const imageBase64 = await blobToBase64(blob)
    return imageBase64; 
}

字符串
使用JSInterop获取base64字符串

private async Task UploadImagesOnBlobAsync()
    {
        var result=await _jsRunTime.InvokeAsync<string>("convertBlobURLToBase64", _card.LogoImageDetails.ActualImage);
    }

相关问题