2016-07-29 8 views
0

nodejs expressとangularjsでs3にファイルをアップロードする際に問題が発生しました。Angularjsからnodejs expressを使ってs3にファイルをアップロードする方法

私は、ファイルをノードエクスプレスに、ノードからs3に送信するために、angleディレクティブを使用しています。

角度指令:

(function() { 
    'use strict'; 
    angular.module('app').directive('ngFileModel', ['$parse', function ($parse) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var model = $parse(attrs.ngFileModel); 
       var isMultiple = attrs.multiple; 
       var modelSetter = model.assign; 
       element.bind('change', function() { 
        var values = []; 
        angular.forEach(element[0].files, function (item) { 
         var value = { 
         // File Name 
          name: item.name, 
          //File Size 
          size: item.size, 
          //File URL to view 
          url: URL.createObjectURL(item), 
          // File Input Value 
          _file: item 
         }; 
         values.push(value); 
        }); 
        scope.$apply(function() { 
         if (isMultiple) { 
          modelSetter(scope, values); 
         } else { 
          modelSetter(scope, values[0]); 
         } 
        }); 
       }); 
      } 
     }; 
    }]); 


})(); 

HTMLコード

<input type="file" id="upme" ng-file-model="files" multiple style="display:none;" /> 
     <div ng-if="files.length>0" ng-init="vm.uploadFile()"></div> 

サーバー側:

exports.upload = function(req, res){ 
    var images = req.body.images; 

    //res.send(images); 
    // console.dir(images) 

    images.forEach(function(file){ 


    // console.dir(file); 
    S3.upFile('testbucket',file.name, file.url, function(err, data){ 

     if(err){ 
     console.log(err) 
     }else{ 
     console.dir(data); 
     } 

    }); 

    }); 

問題は、 アップロード機能が動作し、私はS3バケットにアップロードされている何かを得ますファイル名はバケットに表示されます。それはファイルの実際のサイズではないと私は開くことができないようです。私がファイルをダウンロードすると言うURLをクリックすると、ファイルをダウンロードした後、それは開かれません。私はs3にアップロードする前に、ノードサーバーでファイルを解析するのに問題があると思います。しかし、どのソリューションがそこにあるべきかを特定することはできません。

また、コンソールでエラーが発生します。

TypeError: path must be a string or Buffer 
    at TypeError (native) 
    at Object.fs.open (fs.js:625:11) 
    at ReadStream.open (fs.js:1708:6) 
    at new ReadStream (fs.js:1695:10) 
    at Object.fs.createReadStream (fs.js:1643:10) 

モジュールとしてs3ファイルのアップロード機能を別ファイルにしました。ここにファイルアップロードのモジュール機能があります

// uploading file or object into bucket 
exports.upFile = function(bucket_name, key, file, next){ 

    var params = {Bucket: bucket_name, Key: key, Body: fs.createReadStream(file), ACL:"public-read"}; 
    s3.upload(params, function(err, data) { 
    next(err, data); 
    }); 

}; 

私は専門家の助けを借りています。

答えて

1

アップロード機能の引数としてオブジェクトURLを指定しているわけではありません。実装を修正するには、角度を変更する必要があります。まず、角度から複数のフォームデータとしてファイルを送信する必要があります。

​​

httpリクエストを使用して、このフォームデータをノードサーバーに送信します。 nodejsでexpressを使ってrouteとhttpメソッドを定義することができます。 angularJSでは、要求は次のようになります。

$http.post('/test_route', form, { 
    withCredentials: false, 
    headers: { 
     'Content-Type': undefined 
    }, 
    trnasformRequest: angular.identity 
}).success(function(data) { 
    // do something with data from server 
}); 

ノードサーバーでは、要求を受け取ったときにフォームデータからファイルを抽出する必要があります。まずエクスプレスを使用してルートとメソッドを定義します。

var multiparty = require('multiparty'); 

app.post('test_route', function(req, res) { 
    var form = new multiparty.Form(); 
    form.parse(req, function(err, fields, files) { 
     var files_to_uplaod = files.file; 
     files_to_upload.forEach(function(file) { 
      read_file = fs.readFileSync(file.path); 
      var params = {Bucket: bucket_name, Key: file.originalFilename, Body: read_file, ACL:"public-read"}; 
      s3.upload(params, function(err, data) { 
       next(err, data); 
       // once the file is uploaded you can remove the file from local disk which is saved whn multipart data arrives. 
       fs.unlink(file.path, function(err) { 
        if (err) {console.log(err);} 
       }); 
      }); 
     }); 
    } 
}); 

ノードサーバー上のマルチフォームを解析するには、multipartyモジュールを使用します。詳細はこちらをご覧ください:https://www.npmjs.com/package/multiparty

関連する問題