Blazor .NET6+ iOS端上传文件后按钮失效问题求助

以下是几个经过验证的修复方法，针对你遇到的iOS文件对话框破坏Blazor SPA生命周期导致按钮无法交互的问题：

1. 强制组件重新渲染 #

在文件上传完成后手动调用StateHasChanged()，触发组件重新渲染，确保事件绑定正常：

<InputFile OnChange="HandleFileUpload" />
<button @onclick="HandleButtonClick">测试按钮</button>

@code {
    private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        // 执行文件上传逻辑
        var uploadFile = e.File;
        // 示例：读取文件内容（根据你的需求替换）
        var content = await uploadFile.OpenReadStream().ReadToEndAsync();
        
        // 强制组件更新，修复事件绑定
        StateHasChanged();
    }

    private void HandleButtonClick()
    {
        // 按钮业务逻辑
    }
}

2. 通过JSInterop重置Blazor事件监听 #

如果单纯重新渲染无效，可通过JS调用Blazor内部方法重置事件绑定：

1. 在wwwroot目录创建blazor-ios-fix.js，内容如下：

window.blazorIOSFix = {
    resetEventListeners: function() {
        if (window.Blazor?._internal?.attachEventListeners) {
            window.Blazor._internal.attachEventListeners();
        }
    }
};

2. 在_Host.cshtml（Server Side）或index.html（WASM）中引入该JS文件：

<script src="blazor-ios-fix.js"></script>

3. 在组件中调用修复方法：

@inject IJSRuntime JSRuntime

<InputFile OnChange="HandleFileUpload" />
<button @onclick="HandleButtonClick">测试按钮</button>

@code {
    private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        // 文件上传逻辑
        var uploadFile = e.File;
        // ... 上传处理代码

        // 调用JS修复事件
        await JSRuntime.InvokeVoidAsync("blazorIOSFix.resetEventListeners");
        StateHasChanged();
    }

    private void HandleButtonClick()
    {
        // 按钮逻辑
    }
}

3. 改用原生文件输入组件封装 #

绕过Blazor的InputFile组件，直接使用原生<input type="file">避免生命周期冲突：

@inject IJSRuntime JSRuntime

<input type="file" id="nativeFileInput" @onchange="HandleNativeFileUpload" />
<button @onclick="HandleButtonClick">测试按钮</button>

@code {
    private async Task HandleNativeFileUpload()
    {
        // 通过JS获取选中的文件
        var file = await JSRuntime.InvokeAsync<IJSObjectReference>(
            "document.getElementById('nativeFileInput').files[0]"
        );
        
        // 执行文件上传逻辑（可通过JSInterop将文件内容传递到.NET端）
        // ...

        // 重置文件输入值，避免重复选择同一文件无响应的问题
        await JSRuntime.InvokeVoidAsync("document.getElementById('nativeFileInput').value = ''");
        StateHasChanged();
    }

    private void HandleButtonClick()
    {
        // 按钮业务逻辑
    }
}

4. 更新.NET版本补丁 #

微软在.NET6的SDK 6.0.400及以上、.NET7的SDK 7.0.200及以上版本中修复了部分iOS上的Blazor兼容性问题，建议升级到对应版本的最新补丁后重新部署。

内容的提问来源于stack exchange，提问作者Linken