Здравствуйте, я пытаюсь загрузить файл из локального хранилища с помощью API FileReader. Я протестировал метод 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);
        }

< Сильный > P.S Итак, в соответствии с ошибкой метод вызывается успешно, но получает неопределенное значение. Нужно ли мне выполнять приведение или что-то еще, когда я использую InvokeAsync?

Мне нужно получить содержимое файла.

0
Bercovici Adrian 4 Фев 2019 в 14:08

2 ответа

Лучший ответ

Для решения этой проблемы вы можете использовать прерывания JavaScript. Для решения этой проблемы уже доступны пакеты NuGet. Чтобы увидеть ответ в прямом эфире, посмотрите мое видео https://www.youtube .com / watch? v = -IuZQeZ10Uw & t = 12s

В видео для взаимодействия JavaScript используется пакет NuGet под названием Blazor.FileReader. С помощью 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());

        }
    }

}
2
Ed Charbeneau 4 Фев 2019 в 15:55

Приятель, почему вы обрабатываете переданный параметр функции fileChange, как если бы это был объект события? Это не. Посмотрите еще раз на свой код, ev.Value не является объектом события. Это строковое значение имени файла. Попробуйте вместо этого:

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

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

 }
}

Надеюсь это поможет...

1
enet 4 Фев 2019 в 12:06