19

私は最近、MEAN スタックでプログラミングを始めました。現在、ある種のソーシャル ネットワークを実装しています。そのために MEAN.io フレームワークを使用しています。私の今の主な問題は、ファイルのアップロードを機能させることです。これは、フォームから AngularJS コントローラーにファイルを受け取り、それを詳細情報と共に ExpressJS に渡して、最終的にすべてを MongoDB に送信できるようにするためです。(新規ユーザー登録フォームを作成しています)。

ファイル自体をデータベースに保存したくありませんが、ファイルへのリンクを保存したいです。

Google でさまざまな検索クエリを使用して数十のページを検索しましたが、理解できるものや機能するものは見つかりませんでした。何時間も検索して結果がありません。それが私がここに来た理由です。

誰でもこれで私を助けることができますか？

ありがとう ：）

編集:コードの一部が理解に役立つかもしれません。

私が基礎として使用しているデフォルトの MEAN.io Users Angular コントローラーには次のものがあります。

$scope.register = function(){
        $scope.usernameError = null;
        $scope.registerError = null;
        $http.post('/register', {
            email: $scope.user.email,
            password: $scope.user.password,
            confirmPassword: $scope.user.confirmPassword,
            username: $scope.user.username,
            name: $scope.user.fullname
        })//... has a bit more code but I cut it because the post is the main thing here.
    };

私がやりたいことは、フォームからこのコントローラーにファイルを受け取り、それを電子メール、パスワード、名前などと一緒に渡し、サーバー側にあるexpressjsでjsonを使用できるようにすることです。「/register」は nodejs ルートであるため、(ユーザー スキーマを使用して) ユーザーを作成し、MongoDB に送信するサーバー コントローラーです。

4

4 に答える 4

27

私は最近、このようなことをしました。angular-file-uploadを使用しました。エンドポイントがフォーム データを解析するためのnode-multipartyも必要です。次に、s3 を使用してファイルを s3 にアップロードできます。

これが私の[編集された]コードの一部です。

Angular テンプレート

<button>
  Upload <input type="file" ng-file-select="onFileSelect($files)">
</button>

角度コントローラー

$scope.onFileSelect = function(image) {
  $scope.uploadInProgress = true;
  $scope.uploadProgress = 0;

  if (angular.isArray(image)) {
    image = image[0];
  }

  $scope.upload = $upload.upload({
    url: '/api/v1/upload/image',
    method: 'POST',
    data: {
      type: 'profile'
    },
    file: image
  }).progress(function(event) {
    $scope.uploadProgress = Math.floor(event.loaded / event.total);
    $scope.$apply();
  }).success(function(data, status, headers, config) {
    AlertService.success('Photo uploaded!');
  }).error(function(err) {
    $scope.uploadInProgress = false;
    AlertService.error('Error uploading file: ' + err.message || err);
  });
};

ルート

var uuid = require('uuid'); // https://github.com/defunctzombie/node-uuid
var multiparty = require('multiparty'); // https://github.com/andrewrk/node-multiparty
var s3 = require('s3'); // https://github.com/andrewrk/node-s3-client

var s3Client = s3.createClient({
  key: '<your_key>',
  secret: '<your_secret>',
  bucket: '<your_bucket>'
});

module.exports = function(app) {
  app.post('/api/v1/upload/image', function(req, res) {
    var form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {
      var file = files.file[0];
      var contentType = file.headers['content-type'];
      var extension = file.path.substring(file.path.lastIndexOf('.'));
      var destPath = '/' + user.id + '/profile' + '/' + uuid.v4() + extension;

      var headers = {
        'x-amz-acl': 'public-read',
        'Content-Length': file.size,
        'Content-Type': contentType
      };
      var uploader = s3Client.upload(file.path, destPath, headers);

      uploader.on('error', function(err) {
        //TODO handle this
      });

      uploader.on('end', function(url) {
        //TODO do something with the url
        console.log('file opened:', url);
      });
    });
  });
}

これは私のコードから変更したため、そのままでは機能しない可能性がありますが、役立つことを願っています!

于 2014-04-14T17:13:07.813 に答える
0

平均アップロードは廃止され、現在は「アップロード」と呼ばれています。- https://git.mean.io/orit/uploadで管理されています

于 2016-06-21T11:53:32.250 に答える