AngularJS 未在 Http POST 中设置正确的内容类型答案

【问题标题】：AngularJS Not Setting Correct Content-Type In Http POSTAngularJS 未在 Http POST 中设置正确的内容类型
【发布时间】：2015-11-09 14:49:21
【问题描述】：

所以我正在尝试将 mp3 文件上传到 NodeJS 服务器。我看到文件数据和一切都正确，所以我知道我的模型是正确的，但是每次我发送 http 帖子时，我都会收到一个无效的 JSON 错误。这很令人困惑，因为我已将内容类型设置为未定义和多部分/表单数据，并且无论何时查看控制台，我仍然看到在请求标头中内容类型设置为 application/json。这是我用来上传的代码：

模板：

<form>
  <div class="form-group">
    <label name="type-label" for="type">Type</label>
    <select name="type" ng-model="data.type">
      <option value="music">Music</option>
      <option value="image">Image</option>
      <option value="video">Video</option>
   </select>
  </div>
  <div class="form-group">
    <label name="name-label" for="name">Name</label>
    <input type="text" name="name" ng-model="data.name" />
  </div>
  <div class="form-group">
    <label name="description-label" for="description">Description</label>
    <input type="text" name="description" ng-model="data.description" />
  </div>
  <div>
    <input type="file" upload-file="file"/>
  </div>
  <div class="form-group">
    <div class="btn btn-primary" ng-click="upload()">Select File</div>
  </div>
</form>

服务：

angular.module('app').factory("UploadService", ['$http',
  function($http) {
    return {
      upload: function (file, data) {
        var fd = new FormData();
        fd.append('file', file);
        return $http({
          method: 'POST',
          url: '/upload/' + data.type,
          data: fd,
          transformRequest: angular.identity,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .success(function(){
          //Do something.
        })
        .error(function(){
          //Do something.
        });
      }
    }
  }
]);

控制器：

angular.module('app').controller('UploadController', ['$scope', 'UploadService',
  function($scope, UploadService) {
    $scope.data = {};
    $scope.upload = function() {
      console.log($scope.file);
      UploadService.upload($scope.file, $scope.data);
    };
  }
]);

最后我什至写了一个小助手配置来尝试强制 http 帖子的默认内容类型。

助手：

angular.module('app').config(function($httpProvider) {
  $httpProvider.defaults.headers.post = { 'Content-Type' : 'multipart/form-data' };
});

在这一点上，我很困惑该怎么做，所以任何建议/帮助将不胜感激。如果有比这更简单的方法，或者一般上传 MP3 的任何提示。谢谢！

【问题讨论】：

当我尝试您的代码时，我收到 multipart/form-data 的内容类型。你面临什么问题？？

标签： json angularjs node.js

【解决方案1】：

试试这个

$httpProvider.defaults.headers.post['Content-Type'] = 'multipart/form-data; charset=utf-8';

【讨论】：

【解决方案2】：

你应该像这样在你的服务中设置你的内容类型：

angular.module('app').factory("UploadService", ['$http',
  function($http) {
    return {
      upload: function (file, data) {
        var fd = new FormData();
        fd.append('file', file);
        return $http({
          method: 'POST',
          url: '/upload/' + data.type,
          data: fd,
          transformRequest: angular.identity,
          headers: {
            'Content-Type': undefined
          }
        })
        .success(function(){
          //Do something.
        })
        .error(function(){
          //Do something.
        });
      }
    }
  }
]);

【讨论】：