3

私はこれらのテクノロジーに慣れていないため、ファイルのアップロード方法に関する知識が限られています。調査中に、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

コントローラー、uploadfile ページに戻る必要があるため、/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' を読み取れないという例外が発生しています。

どんな援助も大歓迎です。

ありがとう、メルロイ

4

2 に答える 2

4

$http.post() がファイルをアップロードできるようにするには、いくつかの構成を設定する必要があります。ヘッダー: {'Content-Type': undefined}、transformRequest: angular.identity

それを処理するシンプル/軽量のangular-file-uploadディレクティブを使用できます。FileAPI フラッシュ 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ページに詳細があり、デモページがあります

于 2013-10-28T22:05:30.127 に答える