Чтение входного файла с помощью JSInterop от Blazor - PullRequest
Новая
       26

Чтение входного файла с помощью JSInterop от Blazor

0 голосов
/ 04 февраля 2019

Здравствуйте, я пытаюсь загрузить файл из локального хранилища, используя 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?

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

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

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

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

        }
    }

}
0 голосов
/ 04 февраля 2019

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

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

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

 }
}

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

...