提供的“HttpContent”实例无效。它没有以“multipart/”开头的内容类型标头。参数名称：内容答案

【问题标题】：Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content提供的“HttpContent”实例无效。它没有以“multipart/”开头的内容类型标头。参数名称：内容
【发布时间】：2020-02-06 18:30:03
【问题描述】：

我收到此错误：

提供的“HttpContent”实例无效。它没有以“multipart/”开头的内容类型标头。参数名称：内容

当我尝试使用 FormData() 通过 angularjs 上传文件时。我不知道我做错了什么。

HTML 代码：

<form method="post" enctype="multipart/form-data" ng-model="myform">
      <input type="file" file-model="file1" name="file" /> Upload file
      <div style="margin-bottom: 12%; margin-top: 5%;">
        <div style="float: right;">
          <button class="btn btn-primary" ng-click="CreatePDF()">Save</button>
        </div>
      </div>
</form>

Angularjs 代码

$scope.CreatePDF = function () {

        var file = document.getElementsByName("file");
        var formData1 = new FormData();

        formData1.append('file', file[0].files[0], 'test.pdf');

        API_immigration.converttoBytes.filesBytes(formData1).then(function (res) {
          alert('hi uploaded');
        });
}

这是我从 angularjs 调用 API 的服务文件

var converttoBytes = {
    filesBytes: function (p) {

      return $ajax.post('/api/immigration/application/getFileObj/dddd', p, {
        contentType: 'multipart / form - data'
       }
      );
    }

这是我用 asp.net 编写的 API：

[HttpPost]
[Route("getFileObj/{path}")]

public async Task<string> postuploadfile()
{
    var ctx = HttpContext.Current;
    var root = ctx.Server.MapPath("~/App_Data");
    var provider = new System.Net.Http.MultipartFormDataStreamProvider(root);

    try
    {
        // Read the form data.
        await Request.Content.ReadAsMultipartAsync(provider);

        // This illustrates how to get the file names.
        foreach (var file in provider.FileData)
        {
            var name = file.Headers.ContentDisposition.FileName;
            name = name.Trim('"');
            var localFileName = file.LocalFileName;
            var filepath = Path.Combine(root, name);
            File.Move(localFileName, filepath);
        }
    }
    catch (System.Exception e)
    {
    }
    return "Fileuploaded";
}

我使用了 $http 服务，但我仍然遇到同样的错误，这是我来自 filddler 的原始数据。

POST /api/immigration/applicationtemplate/getFileObj/dddd HTTP/1.1
Host: localhost:31002
Connection: keep-alive 
Content-Length: 120145 
Content-Type: multipart / form - data 
Pragma: no-cache 
Cache-Control: no-cache Accept: / 
Origin: localhost:9002 
Authorization: bearer earer pJhzAZ1D_tnFCY 
Accept-Encoding: gzip, deflate, br 
Accept-Language: en-US,en;q=0.9 –

【问题讨论】：

ng-model 指令不适用于<form> 元素。使用 AngularJS 框架，使用 $http 服务。 jQuery $.ajax 方法没有与 AngularJS 框架及其执行上下文集成。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。
嗨，乔治，感谢您的回复，我使用了 $http 服务，但我仍然遇到同样的错误，这是我来自 filddler 的原始数据。 POST /api/immigration/applicationtemplate/getFileObj/dddd HTTP/1.1 主机：localhost:31002 连接：keep-alive 内容长度：120145 内容类型：multipart / form - data Pragma: no-cache Cache-Control: no-cache Accept: / Origin: localhost:9002 Authorization: bearer earer pJhzAZ1D_tnFCY Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9

标签： angularjs

【解决方案1】：

使用FormData API POST 文件和数据时，将Content-Type header 设置为undefined 很重要。¹

var converttoBytes = {
    filesBytes: function (p) {
        var url = '/api/immigration/application/getFileObj/dddd';
        var config = { headers: { 'Content-Type': undefined } };
        return $http.post(url, p, config);
    }
}

默认情况下，AngularJS 框架使用内容类型application/json。通过设置Content-Type: undefined，AngularJS 框架省略了内容类型标头，允许XHR API 设置内容类型。发送FormData object 时，XHR API 将内容类型设置为multipart/form-data，并具有适当的边界和编码。

欲了解更多信息，请参阅MDN Web API Reference - XHR Send method

【讨论】：