AngularJS结合MVC Web API上传文件时HttpContext.Request.Files计数为0如何解决

问题根源分析 #

1. Angular请求头配置错误，导致multipart请求格式不规范
2. Web API端使用了ASP.NET传统的HttpContext.Current.Request.Files，而非Web API原生的multipart处理方式
3. WebApiConfig中错误地将multipart类型添加到Xml格式化器，干扰了请求解析

修复步骤 #

1. 修正Angular服务的请求配置

修改上传服务的$http请求配置，让浏览器自动处理multipart请求的Content-Type：

this.uploadProfilePicture = function (ProfilePicture) {
    var formData = new FormData();
    formData.append('file', ProfilePicture);
    var request = $http({
        method: "post",
        url: "/api/ImageUploadApi",
        data: formData,
        headers: { "Content-Type": undefined }, // 改为undefined，让浏览器自动设置正确的请求头
        transformRequest: angular.identity // 确保FormData不被Angular自动序列化
    });
    return request;
};

2. 修正Web API控制器的文件处理逻辑

改用Web API原生的MultipartFormDataStreamProvider处理文件上传，替代依赖HttpContext的方式：

using System;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;

namespace UAECensus.Controllers
{
    public class ImageUploadApiController : ApiController
    {
        [HttpPost]
        public async Task<IHttpActionResult> Post()
        {
            // 验证请求是否为multipart类型
            if (!Request.Content.IsMimeMultipartContent())
            {
                return BadRequest("请上传multipart/form-data类型的请求");
            }

            var savePath = System.Web.Hosting.HostingEnvironment.MapPath("~/UserProfilePic/");
            if (!Directory.Exists(savePath))
            {
                Directory.CreateDirectory(savePath);
            }

            // 初始化multipart请求处理提供者
            var provider = new MultipartFormDataStreamProvider(savePath);
            await Request.Content.ReadAsMultipartAsync(provider);

            // 获取上传的文件
            var uploadedFile = provider.FileData.FirstOrDefault();
            if (uploadedFile == null)
            {
                return BadRequest("未检测到上传的文件");
            }

            // 获取原始文件名（移除默认带的引号）
            var originalFileName = uploadedFile.Headers.ContentDisposition.FileName.Trim('"');
            // 重命名Web API自动生成的临时文件为原始文件名
            var finalFilePath = Path.Combine(savePath, originalFileName);
            if (File.Exists(finalFilePath))
            {
                File.Delete(finalFilePath);
            }
            File.Move(uploadedFile.LocalFileName, finalFilePath);

            return Ok(originalFileName);
        }
    }
}

3. 修正WebApiConfig配置

移除之前添加的错误配置，避免干扰multipart请求解析：
删除WebApiConfig.cs中以下代码：

config.Formatters.XmlFormatter.SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("multipart/form-data"));

4. 修复Angular控制器的大小写错误

确保回调参数的大小写一致，避免后续逻辑报错：

PromiseData.then(function (Response) {
    alertify.alert('Picture Uploaded Sucessfully');
    $scope.ProfilePicturePath = Response.data; // 与参数名保持大小写一致
}, function (Error) {
    alertify.alert('Some issue occurred while saving picture');
});

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