Question

我是这些技术的新手，因此对如何上传文件知之甚少。在我的研究期间，我看到了ngUpload和其他基于javascript /指令的解决方案。但是，我正在尝试以下内容，并且不确定我还缺少什么来完成它。

我正在尝试使用angular-express-blog应用程序创建博客后上传文件。我有以下代码

在view.jade

中

fieldset
            h5 Add Media
            form(name='theForm', enctype="multipart/form-data")
              .clearfix
                label Document Name
                .input: input(ng-model='form.docName', name='docName', type='text')
              .clearfix
                label File
                .input: input(ng-model='form.file', type="file", name="file")
              .actions
              button(ng-click="uploadFiles('/page3files')") Upload Files

控制器，我确实需要返回上传文件页面，因此，我传入/ page3files。

$scope.uploadFiles = function( path ) {
        //alert("upload files clikced");
        $http.post('/api/uploadFile', $scope.form).
           success(function(data) {
               $scope.form.docName='';
               $scope.form.file='';
               $location.path(path);
           });
    };

在快递路线档案

exports.uploadFile = function (req, res) {
      console.log("doc name: " + req.body.docName);
      console.log("file name: " + req.body.file.name);
      console.log("file path: " + req.body.file.path);
      res.json(true);
};

不幸的是，我在req.body.file.name上遇到一个异常，说无法读取未定义的属性'name'。

非常感谢任何帮助。

谢谢，梅尔罗伊

Answer 1

为$ http.post（）能够上传您需要设置一些配置的文件。标题：{'Content-Type'：undefined}， transformRequest：angular.identity

您可以使用简单/轻量级angular-file-upload指令来处理这些问题。它支持使用FileAPI flash shim的非HTML5浏览器的拖放，文件进度和文件上传。

<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', '$upload', function($scope, $upload) {
  $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];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        progress: function(e){}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

README页面上有更多信息，并且有Demo page

Answer 2

您可以使用FormData对象发送文件数据。例如：

HTML：

<fieldset>
    <legend>Upload Video</legend>
    <input type="file" name="photo" id="photo">
    <input type="button" ng-click="uploadVideo()" value="Upload">
</fieldset>

JS：

$scope.uploadVideo = function () {
    var photo = document.getElementById("photo");
    var file = photo.files[0];
    var fd = new FormData();  //Create FormData object
    fd.append('file', file);

    $http.post('/uploadVideo', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
        }).success(function (data) {
            // Do your work
        });
 };

使用angular，express和mongodb的gridfs上传文件

2 个答案: