使用 $http 上传文件答案

【问题标题】：file upload with $http使用 $http 上传文件
【发布时间】：2015-07-30 15:26:38
【问题描述】：

这个问题是不是太难了？

我的客户端代码带有发布数据变量，想知道如何将文件数据添加到$http.post。

我看到了一些示例，它们要么使用自定义指令，要么使用手动表单提交，这两种我都没有找到。

客户端：

<input type="file" id="photo">
//file can be accessed using
var photo = document.getElementById("photo").files[0];
$scope.data.photo = photo

或

var formData = new FormData();
formData.append("photo", photo);
formData.append("title", $scope.data.title);
this.delegate.insert(formData);

派去服务

$http.post("/admin/speakers/?" + data, token.body) //token.body = $scope.data
    .success(function(data, status, headers, config) {
     })
    .error(function(data, status, headers, config) {
    });

期望输出服务器端（使用 POSTMAN - REST 客户端生成）

console.log(request.files, request.body);

{ photo: 
   { fieldname: 'photo',
     originalname: '01.jpg',
     name: 'fbb54fa6d588ac253ca7dab08a904356.jpg',
     encoding: '7bit',
     mimetype: 'image/jpeg',
     path: '/var/folders/jg/hkmz0fdn64g8w1jgf60j2lcw0000gn/T/fbb54fa6d588ac253ca7dab08a904356.jpg',
     extension: 'jpg',
     size: 12279,
     truncated: false,
     buffer: null } } 

{ name: 'SA',
  title: 'Dev',
  company: 'CA',
  bio: 'some bio',
  twitter: '@twitter',
  sessionId: '1' }

【问题讨论】：

如果您能够使用 Angular 模块扩展您的应用程序，请检查这些：github.com/danialfarid/ng-file-upload 和 ngmodules.org/modules/angular-file-upload，两者都可以作为 NPM 包使用。

标签： javascript angularjs node.js

【解决方案1】：

尝试将Content-Type header 设置为undefined 并将transformRequest 设置为angular.identity（以不序列化FormData 对象）：

$http.post("/admin/speakers/?" + data, token.body, {
    transformRequest: angular.identity,
    headers: {
        'Content-Type': undefined
    }
}).success(function(data, status, headers, config) {

}).error(function(data, status, headers, config) {

});

Angular 的默认 transformRequest 函数会尝试序列化我们的 FormData 对象，所以我们用标识函数覆盖它以保持数据完整。 Angular POST 和 PUT 请求的默认 Content-Type 标头是 application/json，所以我们也想更改它。通过设置 ‘Content-Type’: undefined，浏览器为我们设置 Content-Type 为 multipart/form-data 并填写正确的边界。手动设置'Content-Type': multipart/form-data 将无法填写请求的边界参数。

(https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs)

【讨论】：