API控制器重写wwwroot文件夹图片后UI不更新的问题排查

我有一个包含Syncfusion Uploader组件的Razor Page，文件上传时会调用API。该API负责将上传文件重命名，覆盖UI项目wwwroot/assets文件夹内的同名图片。在IIS中运行时控制器不会被触发，因此我改为关联Web Assembly项目运行API项目。此时Web Assembly项目中的图片已被正确替换，但UI显示的图片未发生变化。我怀疑这与API项目的运行机制有关，且API项目的wwwroot文件夹位于bin/net 5.0/6.0目录下。

以下是我用于覆盖Web Assembly项目wwwroot文件夹中图片的方法，但由于运行的是API项目，无法确定PNG图片的实际加载来源：

[HttpPost("[action]")]
public void SaveLogo([FromForm] IEnumerable<IFormFile> UploadFiles)
{
    try
    {
        foreach (var file in UploadFiles)
        {
            var filename = ContentDispositionHeaderValue
                .Parse(file.ContentDisposition)
                .FileName
                .Trim('"');
            filename = "KFNBOfficialLogo.png";
            _hostingEnv.ContentRootPath = @"C:\Users\user\Desktop\repos\Manager\Manager\Manager\wwwroot\assets\Logo.png";

            filename = _hostingEnv.ContentRootPath;

            using (FileStream fs = System.IO.File.Create(filename))
            {
                file.CopyTo(fs);
                fs.Flush();
            }
        }
    }
    catch (Exception e)
    {
        Response.Clear();
        Response.StatusCode = 204;
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
    }
}

1. 定位图片加载的实际路径 #

当关联Web Assembly项目运行API时，UI请求的静态文件实际来自API项目bin目录下的wwwroot拷贝，而非Web Assembly项目原目录的文件。你直接修改Web Assembly项目的文件，但API运行时读取的是自身bin目录下的文件，因此UI不会显示新图。

2. 修正API的文件保存逻辑 #

不要硬编码路径，通过IWebHostEnvironment获取正确的wwwroot路径（WebRootPath才是静态文件根目录，ContentRootPath是项目根目录），同时确保修改的是API项目的静态文件目录：

[HttpPost("[action]")]
public IActionResult SaveLogo([FromForm] IEnumerable<IFormFile> UploadFiles)
{
    try
    {
        foreach (var file in UploadFiles)
        {
            if (file.Length <= 0) continue;

            // 目标文件名
            var targetFileName = "KFNBOfficialLogo.png";
            // 拼接API项目wwwroot/assets下的目标路径
            var targetPath = Path.Combine(_hostingEnv.WebRootPath, "assets", targetFileName);

            using (var fs = new FileStream(targetPath, FileMode.Create))
            {
                file.CopyTo(fs);
            }
        }
        return Ok();
    }
    catch (Exception e)
    {
        return StatusCode(StatusCodes.Status500InternalServerError, $"文件上传失败: {e.Message}");
    }
}

3. 解决浏览器缓存问题 #

即使文件替换成功，浏览器可能缓存了旧图片。可以通过两种方式处理：

• 在图片URL后追加时间戳参数，比如：/assets/KFNBOfficialLogo.png?v={DateTime.Now.Ticks}
• 上传成功后，在前端强制刷新图片资源（比如重新设置图片src属性）

4. 修复IIS中控制器不触发的问题 #

• 检查API项目在IIS中的部署配置：路由是否匹配、应用程序池权限是否足够（需有静态目录的读写权限）
• 确认API的路由模板与前端上传请求的URL一致
• 查看IIS日志，排查请求是否到达API控制器

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