Angular 7上传文件至.NET Core后端始终为null问题求助

我之前也碰到过一模一样的问题——Postman测试完全正常，但Angular端上传时后端的IFormFile始终是null，排查后发现问题出在前端FormData的构造上，我们来一步步解决：

问题根源分析 #

看你的前端代码，有两个关键错误导致了这个问题：

• 属性名不匹配：在handleFileInput里你给this.fileToUpload设置的是fileName属性，但在onUpload里调用formData.append时用的是this.fileToUpload.name，这个属性根本不存在，导致表单数据的文件名字段异常，后端无法正确解析文件。
• 冗余的对象封装：你把原生File对象封装到了this.fileToUpload.data里，不仅增加了代码复杂度，还容易出现属性引用错误。

修正后的前端代码 #

// 直接声明为File类型，避免冗余封装
fileToUpload: File | null = null;

handleFileInput(files: FileList) {
    if (files.length === 0) return;
    // 直接保存选中的原生File对象
    this.fileToUpload = files.item(0);
}

onUpload() {
    if (!this.fileToUpload) {
        console.error('请先选择要上传的文件');
        return;
    }
    const formData = new FormData();
    // 正确传入File对象，第三个参数可选，不传会自动使用file的name属性
    formData.append('file', this.fileToUpload, this.fileToUpload.name);
    
    // 重要提示：不要手动设置Content-Type为multipart/form-data，HttpClient会自动处理请求头（包括boundary）
    this.http.post('http://localhost:56000/api/media/upload-file', formData)
        .subscribe(
            res => console.log('上传成功:', res),
            err => console.error('上传失败:', err)
        );
}

后端代码优化建议 #

可以给IFormFile参数加上[FromForm]注解，明确指定参数来自表单数据（虽然默认行为如此，但加上后代码可读性更强，避免歧义），同时增加空值判断：

[HttpPost("upload-file")]
public async Task<IActionResult> UploadFile([FromForm]IFormFile file) {
    try {
        // 增加基础校验，避免空指针异常
        if (file == null || file.Length == 0) {
            return BadRequest("未获取到有效的上传文件");
        }
        var rnd = FileHelper.RandomNumber();
        var folder = "Folder";
        var index = file.FileName.LastIndexOf('.');
        var onlyName = file.FileName.Substring(0, index);
        var fileName = onlyName + rnd;
        var extension = Path.GetExtension(file.FileName);
        var folderThumb = folder + "Thumbnail";
        var fileNameThumb = fileName + "Thumbnail";
        var t1 = Task.Run(() => FileHelper.SaveFile(folder, fileName, file));
        await Task.WhenAll(t1);
        var path = new MediaResponseModel() {
            Url = Url.Action("GetFile", "Media", new { folder = folder, fileName = string.Format("{0}{1}", fileName, extension) }, Request.Scheme),
            UrlThumbnail = Url.Action("GetFile", "Media", new { folder = folderThumb, fileName = string.Format("{0}{1}", fileNameThumb, extension) }, Request.Scheme),
            Title = onlyName
        };
        return Ok(path);
    } catch (System.Exception e) {
        return StatusCode(500, $"上传出错：{e.Message}");
    }
}

为什么Postman能正常工作？ #

因为Postman是严格按照multipart/form-data协议构造请求的，字段名file和文件数据的格式完全符合后端要求，所以能被正确解析；而你的前端代码因为属性名错误，导致FormData的构造不符合协议规范，后端自然接收不到文件。

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