Попытка заставить вещи работать правильно в приложении Blazor Server Side. У меня есть компонент Uploader, но он не вызывает InvokeAsync после разрешения каждого обещания на стороне клиента. Он ожидает загрузки всех изображений, затем вызывает метод C #. Как бы получить его вызывать метод C # после загрузки каждого изображения?
Я знаю, что JavaScript является однопоточным, но также пытался работать с веб-работниками и все еще делает то же самое
Образец репо можно найти здесь https://dev.azure.com/twinnaz/BlazorUploader
Gif того, что происходит.
Он должен иметь возможность параллельно вызывать метод Cyn Async из файла javascript, если мое мышление верно.
2 ответа
Эта проблема связана с 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: Использование async / await с циклом forEach
- Более подробная информация о проблеме с Blazor: Blazor - отображение ожидания или счетчика при вызове API
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);
};