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和flash polyfill，因为IE9不支持FormData。

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

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

1 个答案: