Question

我正在尝试使用JSInterop提供的Blazor读取某些文件。问题是，即使我在.C#中等待该方法，似乎也没有{{1 }}。因此，我无法检索await提供的结果。

C＃

js

JS

<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />

@functions{
    private const string S = "start";

    public async Task OnChangeS(UIChangeEventArgs ev) {
        var str =  await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
        Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
    }
}

输出：
给定一个示例window.methods = { readFile: function (fileName) { let reader = new FileReader(); var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0]; var data = null; reader.onload = () => { data = reader.result; console.log("from load data is"+data); }; reader.onloadend = () => { console.log("from loadend data is"+data);return data }; reader.readAsText(file); } }文件：json，这是我的输出顺序：

{ "name":"adita","age":33}

所以我的问题是WASM: Blazor S:empty Fread.js:11 from load data is: { "name":"adita", "age":33 } Fread.js:14 from loadend data is: { "name":"adita", "age":33 }为什么不等待该方法？

Answer 1

我已经通过将FileReader的结果包装在Promise中来解决了这个问题。 @Kirk Woll 指出，我实际上并没有发回任何邮件。

window.methods = {

    readFile: function (fileName) {
        let reader = new FileReader();
        return new Promise((resolve, reject) => {


            var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
            reader.onerror = () => { reader.abort(); reject("Error parsing file"); };
            reader.onload = () => {
                var data = reader.result;
                console.log("from load data is: " + data);
                resolve(data);


            };
            reader.readAsText(file);
        });
    }
}

Answer 2

尝试一下：更改onchange="@(async(x)=>await OnChangeS(x))" 到onchange="@OnChangeS"

注意：即使此更改不能解决问题，您仍然应该像这样使用它。

如何从Blazor调用JS异步方法

2 个答案: