0

在我的 Blazor 服务器端应用程序中，我试图将图像 Base64 字符串从 JavaScript（调整大小后）传递到 C#。在 JavaScript 中，代码位于 FileReader.onload 函数中，因此它不会返回任何内容。
因此，我试图将数据分配给 JS 中的 HTML textarea 元素，然后在 C# 中从绑定到它的变量中获取它，但这不起作用 - 我得到的是空字符串，虽然，我很确定 textarea 元素具有正确的值。
但是，当我用“Hello from JS”之类的短字符串模拟返回字符串时，它会毫无问题地返回。

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);

完全没有异常/错误。

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

有任何想法吗？

4

1 回答 1

0

因为 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 循环。

于 2021-02-23T05:41:53.467 回答