2016-06-17 1 views
0

ファイルをディレクトリにアップロードしようとしていますが、RESTful-APIパラダイムを使用してセットアップする方法を理解できません。FileUpload usings node.js angular restful-apis

I持って、次のクライアント側のコード

クライアント/ Testarea.html

<input type="file" name="fileUpload" value="fileUpload" placeholder="none" file-model="myFile" /> 
<br> 
<br> 
<button ng-click='uploadFile()'>Upload</button>" 

クライアント/ Testarea.controller.js

$scope.uploadFile = function() 
     { 
     var file = $scope.myFile; 
     var uploadUrl = "/multer"; 
     var fd = new FormData(); 
     fd.append = ('file', file); 

     TestareaSvc.uploadFileSrv(uploadUrl, fd, 
     { 
      transformRequest: angular.identity, 
      headers: 
      { 
       "Content-Type": undefined 
      } 
     }); 
     }; 

指令

angular 
.module('test') 
.directive('fileModel', ['$parse', 
    function ($parse) 
    { 
     return { 
       restrict: 'A', 
       link: function(scope, element, attrs) 
        { 
        var model = $parse(attrs.fileModel); 
        var modelSetter = model.assign; 

        element.bind('change', function() 
        { 
         scope.$apply(function() 
         { 
         modelSetter(scope, element[0].files[0]); 
         }); 
        }); 
        } 
      }; 
    }]); 

CLIENトン/ Testarea.service.js

this.uploadFileSrv = function(uploadURL, fd, obj) 
    { 
    console.log('TestareaSvc - uploadFileSrv'); 
     function uploadFileSrvSuccess(response) 
     { 
     console.log('Upload File Success'); 
     return response; 
     } 

     function uploadFileSrvFailed(error) 
     { 
     console.log('Upload File Failed'); 
     return error; 
     } 

     var doc = new Object(); 
     doc.uploadURL = uploadURL; 
     doc.fd = fd; 
     doc.obj = obj; 
     return $http.post('/api/testareas', doc) 
     .then(uploadFileSrvSuccess) 
     .catch(uploadFileSrvFailed); 
    }; 

Serverコード

API/Testarea.controller.js

//* Using Rails-like standard naming convention for endpoints. 
//* GET  /api/testareas    -> index 
//* POST /api/testareas    -> create 
//* GET  /api/testareas/:id   -> show 
//* PUT  /api/testareas/:id   -> update 
//* DELETE /api/testareas/:id   -> destroy 


var multer = require('multer'); 

var storage = multer.diskStorage({ 
destination: function (req, file, cb) { 
    cb(null, './uploads/') 
}, 
    filename: function(req, file, cb) {  
    cb(null, file.originalname + '-' + Date.now() + ".txt") 
    } 
}); 
var upload = multer({ storage: storage }); 


// Gets a list of Testareas 
exports.index = function(req, res) { 
console.log(‘index’) 
}; 

// Gets a single Testarea from the DB 
exports.show = function(req, res) { 
console.log('exports.show'); 
}; 

// Creates a new Testarea in the DB 
exports.create = function(req, res) { 
console.log('exports.create'); 
}; 

// Updates an existing Testarea in the DB 
exports.update = function(req, res) { 
console.log('exports.update'); 
}; 

// Deletes a Testarea from the DB 
exports.destroy = function(req, res) { 
console.log('exports.destroy'); 
}; 

function handleError(res, err) { 
console.log('handleError'); 
return res.status(500).send(err); 
} 

client.testarea.htmlは、ユーザーにWebページの情報を表示しますユーザは、ファイルマネージャからファイルを選択する。ファイルを選択すると、指定したフォルダ(/ multer)にファイルがアップロードされます。

クライアント/ testarea.htmlは、クライアント/ testarea.controller.jsと通信します。 client.testarea.controller.jsには、ファイル属性の抽出に必要なディレクティブが含まれています。 client/testarea.controller.jsは、client/testarea.service.jsと通信します。フォルダはWebサーバー上に存在するため。 client/testarea.service.jsはapi/testarea.controller.jsと通信します。 api/testarea.controllerがファイルをwebserverにアップロードします。

クライアント/ testarea.htmlから必要な情報をapi/testarea.controller.jsに伝えることができます。私の最初の質問は、「さまざまなスクリプトに適切な情報を渡していますか?」です。しかし、大きな問題は、ファイルをアップロードすることができないということです。私はapi/testarea.controller.jsを取得し、適切な情報を確実に渡す方法を知らない。

私はmulterを使用してファイルアップロードの例を多数見てきましたが、すべての例でクライアントサイドコーディングを使用しました。 APIコントローラーに制御を渡す単一の例が見つかりませんでした。

TIA

+0

この質問への追加として、私は私がアップロードディレクトリの場所を確認する方法について説明を得ることができます。 TIA –

答えて

0

さてあなたは、2つの方法でこの問題に対処することができます。

ファースト - 1回のリクエストでファイルをアップロードした後、ファイル名とデータベースに保存する必要があるそれぞれのディレクトリアドレスでファイルをアップロードすると、サーバーから応答が返されます。私は推測する。

第2 - Angularからnode.jsサーバーへのファイルを他のフィールドと一緒に送信して、一度にすべてのプロセスを完了できます。

どの方法を使用したいのか教えてください。私はそれに基づいてコードリファレンスを投稿します。

よろしいですか?方法1。

私は準備完了の指示文のフロントエンドでngfileuploadモジュールを使用していますが、このプロセスを好きなように複製できます。(公式ドキュメントからコピー)

コードサンプル

Link of the Js Fiddle for frontend code

コントローラコード

var app = angular.module('fileUpload', ['ngFileUpload']); 

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
    $scope.uploadFiles = function(file, errFiles) { 
     $scope.f = file; 
     $scope.errFile = errFiles && errFiles[0]; 
     if (file) { 
      file.upload = Upload.upload({ 
       url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
       data: {file: file} 
      }); 

      file.upload.then(function (response) { 
       $timeout(function() { 
        file.result = response.data; 
       }); 
      }, function (response) { 
       if (response.status > 0) 
        $scope.errorMsg = response.status + ': ' + response.data; 
      }, function (evt) { 
       file.progress = Math.min(100, parseInt(100.0 * 
             evt.loaded/evt.total)); 
      }); 
     } 
    } 
}]); 

サーバー側のコード

ルートコード

app.post('/apicall', functionname('file'), onfileupload); 
あなたはあなたの写真を保存するディレクトリを設定することができ fnupload最初のセクション、すなわち先で

ファイルアップロード機能

var functionname= multer({ storage: fnupload}); 

var fnupload= multer.diskStorage({ 
    destination: function (req, file, cb) { 

    mkdirp(__dirname + directoryname, function (err) { 
     if (err) console.error(err) 
     cb(null, __dirname + directoryname); 
    }); 
    }, 
    filename: function (req, file, cb) { 

    var f = Date.now()+'_'+file.originalname; 
    cb(null,Date.now() + f) 
    picname = f; 
    } 
}) 

directorynameが使用されています実際には、フロントエンドに応答を返すことができる変数名があります。 picnameは、関数の2番目の部分でも使用されていますが、そこにアップロードされる写真の名前になります。

function onfileupload(req, res){ 
res.json({status : 200, photoname : picname, directoryaddress : directoryname}); 
} 

今すぐあなたのフロントエンドの応答を取得し、あなたがngfileuploadモジュールを使用する場合は、応答はresponse.dataになります。

実装で使用したことの詳細については、公式のgithubのMulterドキュメントを参照してください。必要に応じて。 乾杯!

+0

最初の解決策のコード例を提供していただければ幸いです。私が必要とするのは、そのファイル名とそれぞれのディレクトリアドレスを持つWebサーバーにファイルをアップロードすることだけです。フラットファイルを読み込んで適切にデータベースを更新する二次的なプロセスがあります。 –

+0

@AnthonySを完了しました。これがあなたに役立つことを願っています。 –

+0

@AnthonyS動作していませんか? –

0

私はこの提案を実装しようとしましたが、主要なロードブロッキングに走りました。

私は私が私のようtestarea.controller.jsを設定

'use strict'; 

angular 
.module('testApp') 
.config(function($stateProvider) { 
    $stateProvider 
     .state('app.testarea', { 
      url: '/testarea', 
      views: { 
       '': { 
        templateUrl: 'app/components/testarea/testarea.html', 
        controller: 'TestareaCtrl', 
        resolve: { 
         deps: ['$ocLazyLoad', 
          function($ocLazyLoad) { 
           return $ocLazyLoad.load(['app/components/testarea/testarea.controller.js', 
                 'app/components/testarea/testarea.service.js', 
                 'ngFileUpload']); 
          } 
         ] 
        } 
       } 
      } 
     }); 
}); 

を次のように私のteatarea.router.jsを設定し始めた

<input type="file" name="fileUpload" value="fileUpload" placeholder="none" file-model="myFile" /> 
<br> 
<br> 
<button ng-click='uploadFile()'>Upload</button>" 

次のコードで私のtestarea.htmlを更新します次のとおりです。

'use strict';

angular 
.module('testApp') 

.controller('TestareaCtrl', ['$scope', '$timeout', 'Upload', 
    function($scope, $timeout, Upload) 
    { 
     $scope.message = 'Hello'; 

    $scope.uploadFiles = function(file, errFiles) 
    { 
    $scope.f = file; 
    $scope.errFile = errFiles && errFiles[0]; 
    if (file) 
    { 
    file.upload = Upload.upload(
        { 
        url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
        data: {file: file} 
        }); 

     file.upload 
      .then(function (response) 
      { 
      $timeout(function() 
      { 
       file.result = response.data; 
      }); 
      }, 
      function (response) 
      { 
      if (response.status > 0) 
       $scope.errorMsg = response.status + ': ' + response.data; 
      }, 
      function (evt) 
      { 
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
      }); 
    } 
    } 
    }]); 

私は私のコードを保存して、私のブラウザ(Google Chromeの)私は次のメッセージに切り替えると:

ngFileUpload:1キャッチされないでSyntaxError:予期しないほか<

トークンを、私が受け取りますメッセージ次

angular.js:11607エラー:[$インジェクター:UNPR]不明プロバイダ:UploadProvider < - アップロード< - TestareaCtrl

私は私のnode_modulesを検証し、私はエラーを探しますがAngularJS、nodeJS、expressjs、Couchbaseの、などと、私は正直どこから始めれば分からないフォルダ

ファイル・アップロードのngのいる検証します。特に、私は最近、これらの技術を使用してコーディングを始めました。私はSQLデータベースを含む他の言語/技術で長年の経験をコーディングしています。私はコード化する必要がある概念を理解していますが、これらの技術では、コード化の方法を理解していません。

TIA