Question

我一直在努力将个人资料图片上传以及常规文本数据包含在内，并将所有内容发送到后端以通过mongoose创建新用户。我已经尝试了从ng-file-upload / angular-file-upload到构建自定义指令的所有内容但是无法使用我仍然无法将图像或数据提供给服务器端。

我的照片上传html片段如下所示：

  <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>

我已经创建了一个自定义指令“file-input”，如下所示：

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编码并将其存储在带有猫鼬的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，它会为给定的图像创建一个带有正确标题的帖子请求。

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

1 个答案: