无法将图像 Base64 字符串从 JavaScript 传递到 Blazor 服务器应用程序中的 C#

Question

在我的 Blazor 服务器端应用程序中，我试图将图像 Base64 字符串从 JavaScript（调整大小后）传递给 C#。在 JavaScript 中，代码在 FileReader.onload 函数中，所以它不会 return 任何东西。
因此，我试图将数据分配给 JS 中的 HTML textarea 元素，然后在 C# 中从绑定到它的变量中获取它，但这不起作用 - 我得到的是空字符串，虽然，我很确定 textarea 元素有一个 correct 值。
但是，当我用像“来自 JS 的你好”这样的短字符串模拟 returning 字符串时，它得到 returned 没有任何问题。

HTML:
<textarea id="base64ImageTextArea" @bind="base64Image" hidden />

JS:

function ResizeImage(){
        ...
        reader.onload = function (event) {
             ...
             var base64String = ctx.canvas.toDataURL(el.target, item.type, 0); 
             document.getElementById("base64ImageTextArea").value = base64String;
             ...
        }
        ...
}

function GetImageBase64String() {
    return document.getElementById("base64ImageTextArea").value;
}

C#:

private string base64Image;

private async Task OnInputFileChange()
{
    await JSRuntime.InvokeVoidAsync("ResizeImage");
    base64Image = await JSRuntime.InvokeAsync<string>("GetImageBase64String"); // base64Image == ""
}

我还在 Startup.cs 中添加了以下内容：

services.AddServerSideBlazor()
            .AddHubOptions(x => x.MaximumReceiveMessageSize = 102400000);

根本没有exceptions/errors。

注意：我不想在这一步将图像从 JS 上传到服务器，因为我需要在 C# 中对其进行更多操作。

有什么想法吗？

Answer 1

因为 FileReader.onload() 异步运行并且没有等待，我们需要等到它完成它的工作：

private async Task OnInputFileChange()
{
    await JSRuntime.InvokeVoidAsync("ResizeImage");
    while (string.IsNullOrWhiteSpace(base64Image))
    {
         await Task.Delay(100);
         base64Image = await JSRuntime.InvokeAsync<string>("GetImageBase64String");
    }
}

并且不要忘记限制 while 循环。

无法将图像 Base64 字符串从 JavaScript 传递到 Blazor 服务器应用程序中的 C#

Cannot pass image Base64 string from JavaScript to C# in Blazor server app

javascript

c#

blazor-server-side

blazor-jsinterop