Загрузка файла nodejs, angularjs: ошибка формы?

Question

У меня есть загрузка файла multer, которая ничего не делает, это даже не дает мне ошибку. Мой opiniion является то, что это форма ошибки, что форма HTML не может сказать угловой контроллеру для отправки HTTP POST на nodejs

upload.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 Controller 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 Backend 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 
      }); 
     }; 
});