如何在ASP.NET Web API中处理Ionic FileTransfer插件的上传请求

咱们先从前端代码的问题入手，这大概率是请求头设置不当导致后端无法正确解析请求：

1. 移除手动设置的Content-Type头 #

你在FileUploadOptions里手动指定了'Content-Type': 'multipart/form-data'，但FileTransfer插件会自动生成带边界标识符的标准multipart/form-data请求头（比如multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW），手动设置会覆盖这个自动生成的头，导致后端找不到解析请求体的依据。

修改前端的options配置：

let options: FileUploadOptions = { 
    fileKey: 'file', 
    fileName: this.postModel.sound.substr(this.postModel.sound.lastIndexOf('/') + 1), 
    mimeType: 'audio/3gp', 
    httpMethod: 'post', 
    chunkedMode: false, 
    headers: { 
        "Authorization": btoa("user" + ":" + "password")
        // 删掉这里手动设置的Content-Type！
    } 
}

2. 后端用规范方式接收Multipart请求 #

在ASP.NET Web API中，推荐使用MultipartFormDataStreamProvider来处理文件上传，比直接依赖HttpContext.Current.Request更可靠，也更符合Web API的设计规范：

修改你的Web API接口代码：

[System.Web.Http.HttpPost] 
[System.Web.Http.Route("record")] 
public async Task<IHttpActionResult> PostRecord()
{
    // 先校验请求格式是否正确
    if (!Request.Content.IsMimeMultipartContent())
    {
        return BadRequest("请求格式错误，需为multipart/form-data类型");
    }

    // 指定上传文件的临时存储路径（可根据你的业务需求修改）
    var provider = new MultipartFormDataStreamProvider(HttpContext.Current.Server.MapPath("~/App_Data/TempUploads"));

    try
    {
        // 异步读取并解析请求内容
        await Request.Content.ReadAsMultipartAsync(provider);

        // 获取上传的音频文件
        var uploadedFile = provider.FileData.FirstOrDefault();
        if (uploadedFile == null)
        {
            return BadRequest("未检测到上传的音频文件");
        }
        // 文件的本地临时路径：uploadedFile.LocalFileName
        // 文件原始名称：uploadedFile.Headers.ContentDisposition.FileName.Trim('"')

        // 获取前端传递的额外参数（userID和dateTime）
        string userID = provider.FormData.Get("userID");
        string dateTime = provider.FormData.Get("dateTime");

        // 这里编写你的业务逻辑，比如保存文件、存储参数等

        return Ok("音频上传成功");
    }
    catch (Exception ex)
    {
        return InternalServerError(ex);
    }
}

3. 额外排查要点 #

• 确认你的apiUrl配置正确，且Web API已配置CORS（如果是跨域请求），避免跨域拦截导致请求未到达后端。
• 用Ionic的File插件校验this.postModel.sound对应的文件是否真实存在，路径格式是否符合平台要求。
• 可以通过Chrome开发者工具的Network标签，查看前端实际发送的请求头和请求体，确认请求格式是否符合预期。

按照上述步骤修改后，后端应该就能正常接收前端上传的音频文件和参数了。

内容的提问来源于stack exchange，提问作者Umut Gür