如何在.NET MAUI Blazor应用中将本地文件上传至wwwroot目录

前置说明 #

首先要明确一个基础限制：项目源码中的wwwroot目录在应用打包发布后是嵌入安装包的只读目录，运行时没有写入权限，不要尝试直接向该目录写入文件。正确的实现逻辑是把上传的视频存入应用专属的可读写沙盒目录，再通过自定义资源映射规则将目录路径转为可被HTML访问的URL，即可赋值给video标签的src属性。

具体实现步骤 #

1. 实现本地视频文件选择 #

调用MAUI原生的FilePickerAPI选择本地视频文件，示例代码：

private async Task<FileResult?> PickLocalVideoAsync()
{
    try
    {
        return await FilePicker.PickAsync(new PickOptions
        {
            PickerTitle = "选择视频文件",
            FileTypes = FilePickerFileType.Videos
        });
    }
    catch
    {
        // 处理权限申请失败、用户取消选择等异常
        return null;
    }
}

2. 将选中文件写入应用沙盒存储 #

使用MAUI提供的FileSystem.AppDataDirectory作为视频存储路径，该路径应用默认拥有读写权限：

private async Task<string> SaveVideoToStorageAsync(FileResult videoFile)
{
    var savePath = Path.Combine(FileSystem.AppDataDirectory, videoFile.FileName);
    using var sourceStream = await videoFile.OpenReadAsync();
    using var targetStream = File.Create(savePath);
    await sourceStream.CopyToAsync(targetStream);
    return videoFile.FileName;
}

3. 配置自定义资源映射规则 #

在Program.cs中添加Blazor WebView的资源拦截规则，将指定URL前缀的请求映射到沙盒存储目录：

builder.Services.AddMauiBlazorWebView();
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif

// 配置自定义资源解析
builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddBlazorWebViewHandler()
        .AddOnLoading((webView, args) =>
        {
            if (args.Request.Uri?.StartsWith("app://localhost/localmedia/") ?? false)
            {
                var fileName = Path.GetFileName(args.Request.Uri);
                var filePath = Path.Combine(FileSystem.AppDataDirectory, fileName);
                if (File.Exists(filePath))
                {
                    var fileStream = File.OpenRead(filePath);
                    // 可根据文件后缀动态调整contentType
                    args.Response = new WebResourceResponse(
                        contentType: "video/mp4",
                        contentEncoding: "UTF-8",
                        data: fileStream);
                }
            }
        });
});

4. 给video标签赋值src #

上传保存完成后生成对应URL即可直接使用：

<button @onclick="HandleVideoUpload">上传视频</button>
<video controls src="@_videoSrc" width="720" />

@code {
    private string _videoSrc = string.Empty;

    private async Task HandleVideoUpload()
    {
        var videoFile = await PickLocalVideoAsync();
        if (videoFile == null) return;
        var fileName = await SaveVideoToStorageAsync(videoFile);
        _videoSrc = $"localmedia/{fileName}";
    }
}

适配提示：如果需要支持mp4之外的视频格式，可根据文件后缀动态调整WebResourceResponse返回的contentType值，比如mov格式对应video/quicktime、webm格式对应video/webm。

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