文件上传nodejs，angularjs：表单错误？

Question

我有一个 multer 文件上传，它什么都不做，它甚至没有给我一个错误。我的观点是这是一个表单错误，html表单无法告诉角度控制器将http post发送到nodejs

上传.html

    <form  id="uploadForm"  ng-submit="ctrl.submit">
        Select File1: <input type="file" name="file" onchange="angular.element(this).scope().ctrl.selectFile1(this.files)">
        <p></p>
Select File2: <input type="file" name="file" onchange="angular.element(this).scope().ctrl.selectFile2(this.files)">
        <p></p>
        <br>
        <input type="submit" value="Upload" id="submit" class="btn btn-primary"  ng-click="ctrl.submit()">
    </form>

AngularJS 控制器 ctrl.js

var file1 = '';
var file2 = '';

     this.selectFile1 = function(files){
               file1 = files[0];
               this.files = files;
           }
     this.selectFile2 = function(files){
            file2 = files[0];
           this.files = files;
           }
       this.upload = function(){
                 var fd = new FormData();
                 var file = self.fileArray;
                 fd.append('file1', file1);
                fd.append('file2', file2);
     $http.post("/upload", fd, {
                 transformRequest: angular.identity,
                 headers: {"Content-Type": undefined}
             }).then(function success(response){
                 if(response.status == 200){
                     console.log('success');
                 }
                 console.log(response);
             }, function error(response){
                 console.log(response);
             })
         }

NodeJS 后端 test.js

var storage =   multer.diskStorage({
       destination: function (req, file, cb) {
         cb(null, '../uploads');
       },
       filename: function (req, file, cb) {
         cb(null, file.originalname);
       },
    });


var upload = multer({ storage : storage}).array('file', 2);
router.post('/upload', function(req, res){
      upload(req, res, function(err){
            if(err){
              console.log(err);
              return res.end(err);
            }
            console.log(req.files);
            res.sendStatus(200);
          });
});

我可以将文件从 html 保存到角度控制器并将它们保存到表单数据，但是当我将包含 2 个文件的数组的表单数据发送到 nodejs 后端时，我在后端得到一个空的表单数据。

解决方案： 在 nodejs 文件中将 var upload = multer({ storage : storage}).array(...) 更改为 var upload = multer({ storage : storage}).any();

Answer 1

您可以使用 onchange 来选择文件。

<input type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)"/>
<button ng-click="savePhoto()">Save </button>

在角度控制器中

 xx.controller('yourcontroller', function($scope, $http){
        $scope.selectFile = function (files) {
        $scope.files = files;
    };
   $scope.savePhoto = function () {
     var fd = new FormData();
      fd.append("file", $scope.files[0]);
      )) ;
    $http.post("/xxx/photos", fd, {
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity
          }).success(function (data) {
            $scope.image = data; // If you want to render the image after successfully uploading in your db
          });
        };
});