Blazor WebAssembly图片上传无报错但未存入wwwroot/images问题求助

你的问题核心在于Blazor WebAssembly是客户端运行的应用，你当前的代码是在浏览器沙箱环境中执行文件操作，根本无法访问服务器端的wwwroot/images目录——客户端创建的目录和写入的文件只存在于浏览器的临时环境，服务器完全感知不到。

要解决这个问题，必须通过客户端上传文件数据到服务器API，由服务器端代码完成文件写入，具体步骤如下：

1. 修改客户端代码：发送文件数据到服务器API #

使用HttpClient将文件字节数组和扩展名发送到后端接口：

// 注入的HttpClient（确保在Program.cs中已注册）
@inject HttpClient _httpClient

// 上传逻辑
byte[] ImageUploaded; // 已获取的文件字节数组
string fileName; // 原文件名

if (ImageUploaded != null)
{
    var uploadData = new 
    { 
        Bytes = ImageUploaded, 
        Extension = Path.GetExtension(fileName) 
    };
    await _httpClient.PostAsJsonAsync("/api/upload/image", uploadData);
}

2. 服务器端创建API接口：接收并保存文件 #

在ASP.NET Core后端项目中添加控制器，负责接收客户端发送的文件数据，并写入wwwroot/images目录：

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using System.IO;

[ApiController]
[Route("api/upload")]
public class UploadController : ControllerBase
{
    private readonly IWebHostEnvironment _webEnv;

    public UploadController(IWebHostEnvironment webEnv)
    {
        _webEnv = webEnv;
    }

    [HttpPost("image")]
    public async Task<IActionResult> UploadImage([FromBody] FileUploadRequest request)
    {
        if (request.Bytes == null || request.Bytes.Length == 0)
            return BadRequest("无效的文件数据");

        // 获取服务器端wwwroot/images的实际路径
        var imagesDir = Path.Combine(_webEnv.WebRootPath, "images");
        if (!Directory.Exists(imagesDir))
            Directory.CreateDirectory(imagesDir);

        // 生成唯一文件名
        var uniqueFileName = $"{Guid.NewGuid()}{request.Extension}";
        var filePath = Path.Combine(imagesDir, uniqueFileName);

        // 写入文件
        await System.IO.File.WriteAllBytesAsync(filePath, request.Bytes);

        return Ok(new { FileName = uniqueFileName });
    }
}

// 接收请求的模型类
public class FileUploadRequest
{
    public byte[] Bytes { get; set; }
    public string Extension { get; set; }
}

注意事项 #

• 确保服务器端的wwwroot/images目录具备写入权限，如果部署到IIS，需要给应用程序池对应的用户分配该目录的写入权限。
• 客户端的HttpClient必须正确注入，确保能访问到后端API（注意跨域问题，如果客户端和服务器域名不同，需要在后端配置CORS）。

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