MEAN堆栈文件上传 [英] MEAN Stack File uploads

问题描述

我最近开始编程与平均堆栈，而我目前正在实施某种形式的社交网络。使用MEAN.io框架，这样做了。
我的主要问题，现在越来越文件上传工作，因为我想要做的就是接收来自表单文件到AngularJS控制器，并将它传递更多信息对防爆pressJS沿着这样我终于可以发送一切MongoDB的。 （我建立一个新注册用户的形式）。

I've recently started programming with the MEAN Stack, and I'm currently implementing some sort of social network. Been using the MEAN.io framework to do so. My main problem right now is getting the file upload to work, because what I want to do is receive the file from the form into the AngularJS Controller and pass it along with more info's to ExpressJS so I can finally send everything to MongoDB. (I'm building a register new user form).

我不希望存储数据库文件本身，但我想一个链接存储到它。

I dont want to store the file itself on the database but I want to store a link to it.

我已经搜查几十个不同的搜索查询对谷歌页面，但我无法找到任何东西，我能理解或工作过。一直在寻找小时，没有任何结果。这就是为什么我来到这里。

I've searched dozens of pages on google with different search queries but I couldn't find anything that I could understand or worked. Been searching for hours to no result. That's why I've came here.

谁能帮我？

感谢：）

编辑：也许位code将有助于理解

Maybe a bit of the code would help understand.

我使用为基础而默认MEAN.io用户控制器角有这样：

The default MEAN.io Users Angular controller which I'm using as foundation has this:

$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.
    };

我想要做的是：
从表单接收文件，到该控制器和与电子邮件，密码，名称等，等通过它沿着并能够使用于前pressjs的JSON，它位于在服务器端。
在'/寄存器'是一个的NodeJS路线，以便它创建的用户（与用户的模式），并把它发送到MongoDB的

What I want to do is: Receive a file from a form, onto this controller and pass it along with email, password, name, etc, etc and be able to use the json on expressjs, which sits on the server side. The '/register' is a nodejs route so a server controller which creates the user (with the user schema) and sends it to the MongoDB.

推荐答案

我最近做的东西就这样。我用角文件上传。您还需要节点多方为您的端点解析表单数据。然后，你可以使用 S3 的文件上传到S3。

I recently did something just like this. I used angular-file-upload. You'll also want node-multiparty for your endpoint to parse the form data. Then you could use s3 for uploading the file to s3.

下面是我的一些 code的。

Here's some of my [edited] code.

角模板

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

我改变了这个从我的code，所以它可能不开箱的工作，但我希望这是有帮助的！

I changed this from my code, so it may not work out of the box, but hopefully it's helpful!

这篇关于MEAN堆栈文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！