Question

尝试使Blazor Server Side App中的内容正常运行。我有一个Uploader组件，但是在客户端解决了每个诺言之后，它没有InvokeAsync。它等待所有图像加载，然后调用C＃方法。加载每个图像后如何调用C＃方法？

我知道JavaScript是单线程的，但也尝试过与Web worker一起使用，并且仍然做同样的事情。

样本回购可以在这里找到 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问题的更多详细信息：Using async/await with a forEach loop
有关Blazor问题的更多详细信息：Blazor - Display wait or spinner on API call

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在每个承诺解决后调用

2 个答案: