3

我是这些技术的新手，因此对如何上传文件的知识有限。在我的研究中，我看到了 ngUpload 和其他基于 javascript/directive 的解决方案。但是，我正在尝试以下操作，但不确定我还缺少什么来完成它。

我正在尝试在使用 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 处遇到异常，说无法读取未定义的属性“名称”。

非常感谢任何帮助。

谢谢，梅尔罗伊

4

2 回答 2

4

要使 $http.post() 能够上传文件，您需要设置一些配置。标头：{'Content-Type'：未定义}，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 页面

于 2013-10-28T22:05:30.127 回答
1

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
        });
 };
于 2015-07-29T05:25:46.643 回答