Question

您好，我正在尝试使用FileReader API从本地存储加载文件。我已经在js页中直接测试了HTML方法，并且可以正常工作。

但是从Blazor-JSRuntime调用它时，出现以下错误：

'Cannot read property 'files' of undefined
TypeError: Cannot read property 'files' of undefined

JS

window.methods = {
    fileChange:function(event) {
        var file = event.target.files[0];
        console.log("file retrieved");
        var reader = new FileReader();
        reader.onload = function (event) {
            console.log(reader.result);
        };
        reader.readAsText(file); 
    }
}

CSHTML

<input  type="file" onchange="@(async(x)=>await onFileChange(x))"/>
public async Task onFileChange(UIChangeEventArgs ev) {
            var str=await JSRuntime.Current.InvokeAsync<string>("methods.fileChange", ev.Value);
        }

PS 因此，根据错误，该方法被成功调用，但接收到一个未定义的方法。当我使用InvokeAsync时是否需要进行强制转换？

我需要获取文件的内容。

Answer 1

伙计，为什么将传递给fileChange函数的参数视为事件对象呢？它不是。再次查看您的代码，ev.Value不是事件对象。它是文件名的字符串值。尝试以下方法：

window.methods = {
    fileChange:function(fileName) {

        console.log("file retrieved: " + fileName);

 }
}

希望这对您有帮助...

Answer 2

您可以使用JavaScript互操作来解决此问题。已经有NuGet软件包可用于处理此问题。有关该答案的现场视频演示，请观看我的视频https://www.youtube.com/watch?v=-IuZQeZ10Uw&t=12s

在视频中，一个名为Blazor.FileReader的NuGet包用于JavaScript互操作。使用Blazor.FileRead，我可以读取一个input，创建一个数据URI并将其上载到Azure Cognitive Services。您可以在下面看到代码。

@using Blazor.FileReader
@using System.IO;
@using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;
@using Newtonsoft.Json;

@page "/fetchdata"
@inject HttpClient Http
@inject IFileReaderService fileReaderService;

<h1>Cognitive Services Vision</h1>

<input type="file" id="fileUpload" ref="fileUpload" onchange="@UploadFile" />

<img src="@imageData" style="@( analysis != null ? $"border: 5px solid #{analysis.Color.AccentColor}" : "" )" />

@if (analysis == null)
{
    <p>Select an image</p>
}
else
{
    <p>@analysis.Description.Captions.First().Text</p>
    <p>@analysis.Color.AccentColor</p>
    <ul>
        @foreach (var tag in analysis.Tags)
        {
            <li>@tag.Name</li>
        }
    </ul>
}
@functions {

    ElementRef fileUpload;
    string imageData = String.Empty;
    ImageAnalysis analysis;

    async Task UploadFile()
    {
        var files = await fileReaderService.CreateReference(fileUpload).EnumerateFilesAsync();

        using (MemoryStream memoryStream = await files.First().CreateMemoryStreamAsync())
        {
            byte[] bytes = memoryStream.ToArray();

            imageData = $"data:image/jpg;base64,{Convert.ToBase64String(bytes)}";
            var response = await Http.PostAsync(
                    requestUri: "api/SampleData/Save",
                    content: new ByteArrayContent(bytes)
                );
            analysis = JsonConvert.DeserializeObject<ImageAnalysis>(await response.Content.ReadAsStringAsync());

        }
    }

}

从Blazor使用JSInterop读取输入文件

2 个答案: