Multer和AngularJS

Question

我不知道怎么通过angular $http发帖。为什么？我想让multer解析并存储我的文件，并在完成后让angular获得一个副本。更好的是，我希望让angular获得一个副本，然后将其传递给服务器。

我可以使用以下代码片段上传文件：

// view (jade)
.container
  form(action="/upload", method="POST", enctype="multipart/form-data")
    input(type="file", name="f")
    input(type="submit", value="Upload")

// post route (express)
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('f'), function(req, res) {
  console.log(req.file);
});

对任何示例文件运行此命令，都会将我想要的json返回到控制台，并且图像将成功存储在正确的目录中。但是：

// view (jade)
form(enctype="multipart/form-data" ng-submit="uploadFile(file)")
input(type="file", name="f", ng-model="file")
input(type="submit", value="Upload")

// ctrl (angular)
$scope.uploadFile = function(file) {
  console.log(file);
  $http.post('/upload', file);
};

// post route (express)
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('f'), function(req, res) {
  console.log(req.file);
});

这在两个控制台输入上都返回未定义，即使我没有更改文件，我只更改了它的发送方式。

这让我两个人相信两件事中的一件：

提交的数据不是我想的那样。如果是这样，那是什么呢？日志上没有打印任何内容。

或

提交的数据被angular以某种方式改变了。如果是这样的话，是怎么回事？同样，日志上也没有打印任何内容。

Answer 1

在第一种情况下，通过表单将数据直接发送到服务器，让html在幕后进行转换。

在第二种情况下，通过$http通过AngularJs发布，您需要告诉中间件即$http，它需要对请求进行必要的转换，以匹配您传递给表单的属性。

因为我自己已经在这个问题上挣扎了一段时间，这里是我使用的代码(用于$resource)的改编。但我认为它应该适用于它的底层$http。

所以在你的控制器中：

$scope.uploadFile = function(file) {
   console.log(file);
   var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined},
            enctype: 'multipart/form-data'
        }
     })
    .success(function(){
    })
    .error(function(){
    });   
 };

为此，您需要将文件输入字段绑定到模型。当然，出于某些原因，Angularjs选择不这样做。

在jade视图中：

form(enctype="multipart/form-data" ng-submit....)
  input(type="file", name="f", ng-model="file" on change='angular.element(this).scope().readFile(this)')
  input(type="submit", value="Upload")

onchange是JavaScript而不是AngularJs，它会触发我们需要定义的scope.readfile()函数：

在控制器中：

$scope.readfile = function(elem) {
    var file= elem.files[0];
    var reader = new FileReader();
   reader.onload = function() {
       $scope.$apply(function(){
           $scope.file = file;
           $scope.imageUrl = reader.result // to display         image via ng-Src
       })
   }
   reader.readAsDataURL(file);
}

我认为在处理表单时，这应该会给angular带来一些html的魔力。

我建议您在JavaScript的onchange、FormData和FileReader中查找类似的代码片段和更好的文档。