Angular + 图片上传。无法将表单数据发送到后端

Question

我一直在努力将个人资料图片上传与常规文本数据一起发送到后端以通过猫鼬创建新用户。我已经尝试了从 ng-file-upload/angular-file-upload 到构建自定义指令的所有方法，但无济于事，我仍然无法获取图像或数据以将其发送到服务器端。

我的照片上传html sn-p如下：

  <div ng-show="!Login">
    <label class="col-xs-12 col-sm-4">Profile Picture</label>
    <div class="col-xs-12 col-sm-4">
      <input type="file" file-input="files" multiple/>
      <button ng-click="upload()">Upload</button>
    </div>
  </div>

我创建了一个自定义指令“文件输入”，如下所示：

app.directive('fileInput', ['$parse', function($parse){
  return {
  restrict: "A",
  link: function(scope, elm, attrs){
    elm.bind("change", function(){
      $parse(attrs.fileInput)
      .assign(scope, elm[0].files)
      scope.$apply()
    });
  }
} 
}])

我的控制器看起来像这样：

  $scope.upload = function(){
    var fd = new FormData();
    fd.append('file', $scope.files[0])
    console.log(fd);
    userFactory.addPhoto(fd)
    .success(function(data){
      console.log("Data: ", data);
    })
  }

这是我将表单数据发布到后端的服务：

   userFactory.addPhoto = function(fd){
    return $http.post('/users/addPhoto', fd, {
      transformRequest:angular.identity,
      headers:{
        'Content-Type': undefined
      }
    })
  }

所以问题在于，当我将数据发送到后端并到达那里时，我得到一个空白的 req.body 对象，其中没有任何内容

router.post('/addPhoto', function(req, res, next){
  console.log(req.body);
  // var profilePicture = new Buffer(req.file.buffer, 'base64').toString('ascii')
  // console.log(profilePicture);
});

这里发生了什么？我想在后端的缓冲区中获取图像，以便我可以对其进行 base64 编码并将其与 mongoose 一起存储在 mongodb 中。

如果有人有办法将图像和文本数据一起发送到 ng-click 函数中，将它们传送到控制器，这样我就可以将它们都放在一个对象中，然后将该对象发送到后端一起注册一个新用户我非常喜欢这个解决方案。

Answer 1

您需要正确的 http 标头。 content-type = undefined 不起作用。相反，它应该是Content-Type: multipart/form-data\n。话虽如此，有许多角度上传指令，其中之一是

https://github.com/danialfarid/ng-file-upload.

它也支持旧版浏览器。下面显示了如何上传文件，例如一张图片，以及使用上述指令的表单中的其他数据：

https://jsfiddle.net/danialfarid/maqbzv15/38/

基本上你给它一个文件和一个 url，它会为给定的图像创建一个带有正确标题的 post 请求。