Question

我有一个multer文件上传，什么都不做，它甚至没有给我一个错误。我的意见是，这是一个表单错误，html表单无法告诉角度控制器将http帖子发送到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控制器 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
          });
        };
});

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

1 个答案: