Blazor(服务器端).NET 6 中的 InputFile 组件出现问题

问题描述 投票:0回答:1

我创建了简单的 Blazor 组件用于图片预览和上传。 InputFile 组件被隐藏,标签用作打开选择文件对话框的按钮。 选择文件/图像后,我想在预览时显示图像。 我读取文件末尾将其编码为base64。

@using Microsoft.AspNetCore.Components.Forms
@inject IJSRuntime JSRuntime

<div class="m-2">        
    <InputFile style="display: none" id="productPictureInput" OnChange="HandleImageUpload" accept="image/*" />
    <label for="productPictureInput" class="btn btn-primary" style="cursor: pointer;" @onclick="TriggerFileInput">Add Image</label>
    @if (imagePreviewSrc != null)
    {
        <img src="@imagePreviewSrc" alt="Image preview" style="max-width: 200px; max-height: 200px; margin-left: 10px;" />
    }
</div>

@code {
    private string? imagePreviewSrc;

    private async void TriggerFileInput()
    {
        await JSRuntime.InvokeVoidAsync( "triggerClickEvent", "productPictureInput" );
    }

    private async void HandleImageUpload(InputFileChangeEventArgs e)
    {
        var imageFile = e.GetMultipleFiles().FirstOrDefault();
        if (imageFile != null)
        {
            var imageStream = imageFile.OpenReadStream();
            var buffer = new byte[imageStream.Length];
            await imageStream.ReadAsync(buffer);
            imagePreviewSrc = $"data:image/jpg;base64,{Convert.ToBase64String(buffer)}";
            StateHasChanged();
        }
    }
}

当我在其他 Blazor 页面上尝试该组件时,我遇到了奇怪的行为。 加载(选择文件)对话框打开两次,图像仅部分加载(参见附图),然后我无法更改(选择其他)图像。 partly loaded image

所以请告诉我出了什么问题? 谢谢。

JS功能:

function triggerClickEvent(elementId) {
    document.getElementById(elementId).click();
}

可能值得一提的是 - 它是 ASP.NET MVC 应用程序,.NET 6。我将

services.AddServerSideBlazor();
添加到 Startup.cs。

asp.net-core .net-core blazor blazor-server-side
1个回答
0
投票

我使用了下面的代码,效果很好。

@page "/Input"
@rendermode InteractiveServer

<h3>Inputfile Preview</h3>
<div class="m-2">        
    <InputFile OnChange="@HandleImageUpload" multiple accept="image/*" />
    @if (imagePreviewSrc != null)
    {
        <img src="@imagePreviewSrc" alt="Image preview" style="max-width: 200px; max-height: 200px; margin-left: 10px;" />
    }
</div>

@code {
    private string? imagePreviewSrc;

    private async void HandleImageUpload(InputFileChangeEventArgs e)
    {
        var imageFile = e.GetMultipleFiles().FirstOrDefault();
        if (imageFile != null)
        {
            var imageStream = imageFile.OpenReadStream();
            var buffer = new byte[imageStream.Length];
            await imageStream.ReadAsync(buffer);
            imagePreviewSrc = $"data:image/jpg;base64,{Convert.ToBase64String(buffer)}";
            StateHasChanged();
        }
    }
}

enter image description here

然后我在另一个组件中使用了这个组件,它也运行良好。

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.