Javascript 穆特和安格拉斯

我不知道如何通过http发布。为什么？我希望multer解析并存储我的文件，并在完成后获取副本。更好的是，我想让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);
});

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

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

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

或

---

提交的数据在某种程度上被修改了。如果是这样，怎么办？在第一种情况下，通过将数据直接通过表单发送到服务器，可以让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(){
    });   
 };

$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);
}

为此，需要将文件输入字段绑定到模型。当然，出于某些原因，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.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(){
    });   
 };

$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);
}

我认为，在处理表单时，这应该会让一些html魔法回到angular中

我建议您查看JavaScript的

onchange

、

FormData

和

FileReader

，以获得类似的代码片段和更好的文档