.NET 6 MVC中Blazor组件文件上传仅获路径无法本地保存的问题

问题核心 #

Blazor里的<input type="file">无法通过ChangeEventArgs直接获取文件内容，浏览器安全机制也不会返回真实本地路径，正确的文件操作需要使用Blazor专属的InputFileChangeEventArgs和IBrowserFile类型。

具体解决方案 #

1. 更新Razor视图代码
   补充必要命名空间，注入环境服务用于获取服务器路径，同时修正事件参数类型：

   @using Microsoft.AspNetCore.Components.Forms;
   @using Microsoft.AspNetCore.Components;
   @using Microsoft.AspNetCore.Components.Web;
   @using MODELS.DBModels;
   @using Microsoft.AspNetCore.Http;
   @using Microsoft.Extensions.DependencyInjection;
   @using Microsoft.Extensions.Http;
   @using Newtonsoft.Json;
   @inject HttpClient http;
   @inject IConfiguration Configuration;
   @inject IWebHostEnvironment WebHostEnv;
   
   <EditForm Model="@userModel" OnValidSubmit="@HandleSubmit">
       <div class="custom-file">
           <input type="file" class="custom-file-input" id="ProfilePicture" 
                  @onchange="@HandleProfilePictureChange">
       </div>
   </EditForm>
   

2. 修改文件处理逻辑
   替换原方法，使用InputFileChangeEventArgs获取文件并完成本地保存：

   @code {
       private ApplicationUsers userModel = new ApplicationUsers();
       private ApiResponseMasterData _response = new ApiResponseMasterData();
   
       private async Task HandleProfilePictureChange(InputFileChangeEventArgs e)
       {
           var targetFile = e.File;
           if (targetFile == null) return;
   
           // 定义服务器保存目录（示例为wwwroot下的Uploads文件夹）
           var saveDirectory = Path.Combine(WebHostEnv.WebRootPath, "Uploads");
           // 确保目录存在
           if (!Directory.Exists(saveDirectory))
           {
               Directory.CreateDirectory(saveDirectory);
           }
   
           // 生成唯一文件名，避免覆盖
           var uniqueFileName = $"{Guid.NewGuid()}_{targetFile.Name}";
           var fullSavePath = Path.Combine(saveDirectory, uniqueFileName);
   
           // 读取文件流并写入本地
           using var fileStream = new FileStream(fullSavePath, FileMode.Create);
           await targetFile.OpenReadStream().CopyToAsync(fileStream);
   
           // 可选：将文件名绑定到模型，后续可存入数据库
           userModel.ProfilePicture = uniqueFileName;
       }
   
       private async Task HandleSubmit()
       {
           // 表单提交逻辑，比如调用API保存用户数据
       }
   }
   

关键要点 #

• IBrowserFile：Blazor针对浏览器上传场景提供的文件对象，包含文件流、名称、大小等核心信息，替代传统MVC中的IFormFile。
• 路径安全：通过IWebHostEnvironment获取服务器wwwroot路径，避免硬编码路径导致的部署兼容问题。
• 文件唯一性：用Guid生成文件名前缀，防止同名文件覆盖原有内容。

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