Blazor WebAssembly中MudFileUpload上传图片无法保存至本地磁盘

核心问题原因 #

Blazor WebAssembly 运行在浏览器的沙箱环境中，没有直接访问用户本地文件系统或服务器磁盘的权限。你代码中直接调用File.WriteAllBytesAsync写入本地路径E:\Test\Destination.jpg的操作会被浏览器静默阻止，不会抛出异常，因此文件无法生成。

解决方案一：通过浏览器触发文件下载（前端直接处理） #

如果需求是让用户把文件保存到自己的本地设备，标准做法是生成下载链接，让浏览器触发下载行为：

1. 在组件代码中修改UploadFiles方法：

@inject IJSRuntime JSRuntime

public async Task UploadFiles(IBrowserFile file)
{
    // 读取文件字节并生成预览URL
    var bytes = new byte[file.Size];
    await using var stream = file.OpenReadStream(file.Size);
    await stream.ReadAsync(bytes);
    profilePicDataUrl = $"data:image/jpg;base64,{Convert.ToBase64String(bytes)}";
    
    // 调用JS触发浏览器下载
    var fileName = "Destination.jpg";
    var blob = new Blob(new[] { bytes }, new BlobPropertyBag { Type = file.ContentType });
    var url = Url.CreateObjectUrl(blob);
    await JSRuntime.InvokeVoidAsync("downloadFile", url, fileName);
    Url.RevokeObjectUrl(url);
}

2. 在wwwroot目录下创建download.js文件，添加以下JS代码：

function downloadFile(url, fileName) {
    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.download = fileName;
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor);
}

3. 在Razor页面底部引入该JS文件：

<script src="download.js"></script>

解决方案二：上传文件到后端服务，由后端保存到磁盘 #

如果需要将文件持久化到服务器的磁盘（比如你代码中的E:\Test路径），必须通过后端服务处理：

后端（ASP.NET Core Web API）实现上传接口

[ApiController]
[Route("api/files")]
public class FilesController : ControllerBase
{
    [HttpPost("upload")]
    public async Task<IActionResult> Upload(IFormFile file)
    {
        if (file == null || file.Length == 0)
            return BadRequest("未上传有效文件");
            
        var savePath = Path.Combine(@"E:\Test\", file.FileName);
        // 确保目标目录存在
        Directory.CreateDirectory(Path.GetDirectoryName(savePath));
        
        await using var stream = new FileStream(savePath, FileMode.Create);
        await file.CopyToAsync(stream);
        
        return Ok("文件保存成功");
    }
}

Blazor前端修改上传逻辑

@inject HttpClient HttpClient

public async Task UploadFiles(IBrowserFile file)
{
    // 生成预览URL的逻辑不变
    var bytes = new byte[file.Size];
    await using var stream = file.OpenReadStream(file.Size);
    await stream.ReadAsync(bytes);
    profilePicDataUrl = $"data:image/jpg;base64,{Convert.ToBase64String(bytes)}";
    
    // 构造表单数据并上传到后端
    var formContent = new MultipartFormDataContent();
    formContent.Add(new StreamContent(file.OpenReadStream(file.Size)), "file", file.Name);
    
    var response = await HttpClient.PostAsync("api/files/upload", formContent);
    if (!response.IsSuccessStatusCode)
    {
        // 处理上传失败的情况，比如提示用户
        var errorMsg = await response.Content.ReadAsStringAsync();
        // 示例：用MudBlazor的Snackbar提示错误
        // Snackbar.Add($"上传失败: {errorMsg}", Severity.Error);
    }
}

注意事项 #

• 禁止在Blazor WebAssembly中直接操作本地文件系统，这是浏览器的安全限制，无法绕过。
• 若需用户本地保存文件，方案一是唯一可行的前端方案。
• 若需持久化存储，必须依赖后端服务完成磁盘写入操作。

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