angularjs - 提供的 'HttpContent' 实例无效。它没有以 'multipart/' 开头的内容类型 header 。参数名称 : content

Question

我收到此错误:

Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content

当我尝试使用 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 服务，但仍然遇到同样的错误，这是我从 fildler 获取的原始数据。

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 –

Answer 1

使用 FormData API 时要 POST 文件和数据，设置 Content-Type header 很重要至 undefined . 1

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 框架省略了内容类型 header ，允许 XHR API设置内容类型。发送 FormData object 时，XHR API 将内容类型设置为 multipart/form-data具有适当的边界和编码。

如需更多信息，请参阅 MDN Web API Reference - XHR Send method