如何通過AngularJS通過Node.js Express將文件上傳到s3

Question

我面臨通過nodejs express和angularjs將文件上傳到s3的問題。

我正在使用angular指令將文件發送到節點express以及從節點發送到s3。

Angular指令：

 (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);
  });

};

我感謝專家的任何幫助。

Answer 1

您不是將文件作為上傳函數的參數，而是對象URL。 為了更正您的實現，您必須對角度進行一些更改。 首先，您應該從angular發送文件作為多部分表單數據。 您可以使用以下方法實現此目的：

var form = new formData();
angular.forEach(element[0].files, function (item) {
    form.append('file', item);
});

使用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
});

在節點服務器上，當您收到請求時，必須從表單數據中提取文件。 首先使用express定義路線和方法：

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);}
                });   
            });
        });
    }
});

要在節點服務器上解析多表，請使用多方模塊。 可以在這里找到更多信息： https : //www.npmjs.com/package/multiparty