如何在 Blazor 中删除上传的文件答案

【问题标题】：How to remove uploaded file in Blazor如何在 Blazor 中删除上传的文件
【发布时间】：2022-10-23 14:39:36
【问题描述】：

我希望添加一个删除按钮来清除选定的文件。

看不到删除文件的任何事件

<InputFile OnChange="@OnInputFileChange">

【问题讨论】：

标签： blazor blazor-webassembly

【解决方案1】：

要清除选定的文件，您可以为InputFile 组件引入一个关键属性。通过更改此键值，Blazor 会将 InputFile 重新呈现为新组件，从而清除所选文件。

@page "/"

<form @onsubmit="OnSubmit">
    <InputFile @key=@(inputFileId) OnChange="OnInputFileChange"/>
    <br /><br />
    <button type="button" class="btn btn-secondary" @onclick="ResetInputFile">Reset</button>
    <button type="submit" class="btn btn-primary">Upload Selected File</button>
</form>

@code
{
    private Guid inputFileId = Guid.NewGuid();
    IBrowserFile selectedFile;

    private void ResetInputFile() 
    {
        // Change id so that blazor re-renders InputFile as new component
        inputFileId = Guid.NewGuid();
    }

    private void OnInputFileChange(InputFileChangeEventArgs e)
    {
        selectedFile = e.GetMultipleFiles()[0];
        // Do stuff
        //this.StateHasChanged();
    }

    private async void OnSubmit()
    {
        if (selectedFile != null)
        {
            // Do stuff
        }
        this.StateHasChanged();
    }
}

输出：

【讨论】：