asp.net-core - Blazor 输入文件组件(文件上传)

Question

我面临一个与用于文件上传的 Blazor 输入文件组件相关的小问题。

来源 - https://github.com/SteveSandersonMS/BlazorInputFile

Component Call - 
  <div class="form-control">
       <InputFile OnChange="HandleFileSelected" />
  </div>

我可以使用此组件成功上传和删除文件。当我上传文件时，文件名显示在组件旁边，如下面的屏幕截图所示。



当我删除文件时，文件被成功删除，但文件名仍显示在组件旁边。

我希望删除文件后应删除文件名。我尝试了几个选项，但没有运气示例 StateHasChanged();

是否可以只刷新特定组件？如何 ？

任何人都可以帮助解决这个问题。 (我不想使用javascript来实现解决方案)

Answer 1

我可以向您展示我为隐藏标准文件输入所做的工作，并显示自定义图像并为文件名使用自定义标签，以便您可以隐藏它、更改文本等。

我有一个 BlazorInputFile 的包装组件，其中包含隐藏标准输入、显示按钮或其他图像以及绑定(bind)变量以显示文件名的选项:

<FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
 OnReset="OnReset" ResetButtonClassName="localbutton"
 ShowStatus="false"  PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
 ShowCustomButton="true"  ButtonText="Start" CustomButtonClassName="startbutton" 
 AllowedExtensions=".jpg;.png;" ShowResetButton="false" 
 CustomExtensionMessage="Only .jpg and .png files are allowed." 
 AppendPartialGuid="true" InputFileClassName="customfileupload" 
 FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>


[Parameter] public EventCallback<string> OnReset { get; set; }

在我的 CSS 中，我隐藏了这样的输入文件，它在 Edge 上不起作用，正在处理:

这是 CustomButtonClassName，它使用我的开始图像:

CustomButtonClassName="startbutton"

.startbutton
{
    position: fixed;
    background-color: transparent;
    border: 0px;
    outline: none;
    background-image: url('../images/StartButton.png');
    background-repeat: no-repeat;
    top: 36vh;
    left: 50%;
    width: 28%;
    height: 28%;
    background-size: 100%;
    margin-left: -14%;
    cursor: pointer;
}


.customfileupload
{  
    display: inline-block;
    cursor: pointer;
    height:48px;
    min-height: 48px;
    visibility: hidden;
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
}

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button
{
    cursor: pointer;
    display: none;
    visibility: hidden;
}

最终结果是我的上传按钮如下所示:



完整的源代码和示例项目在这里，如果它可以帮助任何人:

https://github.com/DataJuggler/BlazorFileUpload

Nuget:DataJuggler.Blazor.FileUpload