Blazor JsInterop 在每个承诺解决后调用

Question

正在尝试让 Blazor 服务器端应用程序正常运行。我有一个上传器组件，但在客户端解决每个承诺后它不会 InvokeAsync 。它等待所有图像加载，然后调用 C# 方法。我如何让它在每个图像加载后调用 C# 方法？

我知道 JavaScript 是单线程的，但也尝试过使用 web workers 并且仍然做同样的事情。

可以在此处找到示例存储库 https://dev.azure.com/twinnaz/BlazorUploader

动态图。

https://imgur.com/a/aF4AQUf

如果我的想法是正确的，它应该能够从 javascript 文件中并行调用 C# 方法 Async。

Answer 1

此问题与 Blazor 和 JS 有关。在 JS 上，您不是在等待 GenerateImageData。

您应该改用现代 for … of 循环，其中 await 将按预期工作：

GetFileInputFiles = async (instance, fileInput) => {
    var files = Array.from(fileInput.files);
    for (const image of files) {
        var imagedata = await readUploadedFileAsText(image);
        console.log("sending");
        _ = await instance.invokeMethodAsync('GenerateImageData', imagedata);
        console.log("sent");
    };
};

在 Blazor 上，我建议您将 GenerateImageData 重写为：

    [JSInvokable]
    public async Task GenerateImageData(string data)
    {
        System.Console.WriteLine( "Receiving"  );
        ImageBase64.Add(data);
        await Task.Delay(1);
        StateHasChanged();
        System.Console.WriteLine( "Received"  );
    }

结果：

关于 JS 问题的更多详细信息：
关于 Blazor 问题的更多详细信息：

Answer 2

GeneratePreviewImages = async (dotNet, fileInput) => {

    const files = Array.from(fileInput.files);

    const imageSrcs = files.map(file => getPreviewImageSrc(file));
    loop(imageSrcs, dotNet);
};



const loop = async (arr, dotNet) => {
    for await (const src of arr) {
        console.log(src);
        dotNet.invokeMethodAsync('GenerateImageData', src);
    }
};

const getPreviewImageSrc = async (file) => {
  return  URL.createObjectURL(file);
};

Blazor JsInterop 在每个承诺解决后调用

Blazor JsInterop Invoke after each promise resolves

javascript

c#

blazor

blazor-server-side