.NET 6 Core中Ajax上传文件至wwwroot/upload_files失败求助

核心问题分析 #

你的Ajax调用失败主要源于以下几个关键错误：

• 未创建FormData对象封装文件，data变量未定义直接使用
• 请求URL路径错误，ASP.NET Core控制器路由不需要后缀Controller
• 未正确获取选中的文件并添加到请求数据中
• 后端路径拼接存在风险，手动字符串拼接易导致路径错误

修正后的代码实现 #

1. 修正Ajax代码

$("#upload").click(function (evt) {
    var fileInput = $("#files")[0];
    var selectedFile = fileInput.files[0];
    
    if (!selectedFile) {
        alert("请先选择要上传的文件");
        return;
    }

    // 创建FormData对象包装文件
    var formData = new FormData();
    formData.append("files", selectedFile); // 参数名需与后端控制器参数一致

    $.ajax({
        type: "POST",
        url: "/Files/UploadFile", // 正确路由格式：控制器名/动作名
        contentType: false,
        processData: false,
        data: formData,
        success: function (message) {
            alert(message);
        },
        error: function (xhr) {
            // 打印错误详情便于排查
            console.error("上传失败详情：", xhr.responseText);
            alert("文件上传失败，可查看浏览器控制台获取具体错误信息");
        }
    });
});

2. 优化后端控制器路径处理

控制器中手动拼接路径易出错，改用Path.Combine确保跨平台兼容性，同时简化逻辑：

[HttpPost("[action]")]
public async Task<IActionResult> UploadFile(IFormFile files)
{
    if (files == null || files.Length == 0)
        return BadRequest("未选择文件");

    // 直接基于WebRootPath拼接目标路径
    var targetDirectory = Path.Combine(_appEnvironment.WebRootPath, "upload_files");
    // 确保目标目录存在，避免创建文件时出错
    Directory.CreateDirectory(targetDirectory);
    
    var targetFilePath = Path.Combine(targetDirectory, files.FileName);

    using (var stream = new FileStream(targetFilePath, FileMode.Create))
    {
        await files.CopyToAsync(stream);
    }

    return Ok($"{files.FileName} 上传成功，文件位置：{targetFilePath}");
}

额外排查要点 #

1. 确认控制器类名为FilesController，确保路由匹配
2. 检查IWebHostEnvironment是否已正确注入到控制器构造函数中
3. 打开浏览器开发者工具的Network标签，查看请求的状态码和响应内容，定位具体错误（如404路由不存在、400参数不匹配等）

内容的提问来源于stack exchange，提问作者Hassan Shahzad Aheer