如何將文件附加到post request nodejs？

Question

我正在使用nodejs進行文件上傳。我正在嘗試類似下面的鏈接。但沒有得到如何發佈的東西。我需要將JSON數據和文件一起發佈。我能怎麼做？

function myCtrl() { 

    //an array of files selected 
    $scope.files = []; 

    //listen for the file selected event 
    $scope.$on("fileSelected", function (event, args) { 
     alert("file selected:") 
     $scope.$apply(function() {    
     //add the file object to the scope's files collection 
     $scope.files.push(args.file); 
     }); 
    }); 

    //the save method 
    $scope.save = function(filename) { 
     $http({ 
     method: 'POST', 
     url: "http://localhost:3000/uploadfile", 
     headers: { 'Content-Type': false }, 
     //This method will allow us to change how the data is sent up to the 
     //server for which we'll need to encapsulate the model data 
     //in 'FormData' 
     transformRequest: function (data) { 
      var formData = new FormData(); 
      formData.append("model", angular.toJson(data.model)); 
      for (var i = 0; i < data.files; i++) { 
       //add each file to the form data and iteratively name them 
       formData.append("file" + i, data.files[i]); 
      } 
      return formData; 
     }, 
     //Create an object that contains the model and files which will 
     //be transformed in the above transformRequest method 
     data: {files: $scope.files } 
     }). 
     success(function (data, status, headers, config) { 
     alert("success!:"+JSON.stringify(data)); 
     }). 
     error(function (data, status, headers, config) { 
     alert("failed!:"+JSON.stringify(data)); 
     }); 
    }; 
} 

這裏是我的角度指令「文件上傳」，我用來識別選擇的文件上傳。

angular.module('myApp', []).directive('file-upload', function() { 
    return { 
     scope: true,  //create a new scope 
     link: function (scope, el, attrs) { 
      el.bind('change', function (event) { 
       var files = event.target.files; 
       //iterate files since 'multiple' may be 
         //specified on the element 
       for (var i = 0;i<files.length;i++) { 
        //emit event upward 
        scope.$emit("fileSelected", { file: files[i] }); 
       }          
      }); 
     } 
    }; 
}); 

我正在使用ng-click我打電話save（）。不工作。問題是什麼？

Answer 1

我在代碼中看不到任何ng-click。 正確的方法是綁定到「更改」事件，這似乎是你在做什麼。 您可以使用輕量級angular-file-upload庫，該庫使用指令執行您正在查找的內容。 由於IE9不支持FormData，因此它還支持使用閃存填充的IE9。

<script src="angular.min.js"></script> 
<script src="angular-file-upload.js"></script> 

<div ng-controller="MyCtrl"> 
    <input type="file" ng-file-select="onFileSelect($files)" multiple> 
</div> 

JS：

//inject angular file upload directive. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$http', function($scope, $http) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var $file = $files[i]; 
     $http.uploadFile({ 
     url: 'my/upload/url', 
     file: $file 
     }).then(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    } 
}];