意味着堆栈文件上传

Question

我最近开始用MEAN Stack进行编程，而且我正在实现某种社交网络。一直使用MEAN.io框架来做到这一点。 我现在的主要问题是让文件上载工作，因为我想要做的就是将文件从表单接收到AngularJS Controller中，并将其与更多信息一起传递给ExpressJS，以便我最终可以将所有内容发送到MongoDB。 （我正在建立一个注册新用户表格）。

我不想将文件本身存储在数据库中，但我想存储一个链接。

我在谷歌搜索了几十页不同的搜索查询，但我找不到任何我能理解或工作的东西。一直在寻找几个小时，但没有结果。这就是我来到这里的原因。

任何人都可以帮助我吗？

谢谢:)

编辑：也许有点代码会帮助理解。

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

$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。

Answer 1

我最近做了这样的事情。我用angular-file-upload。您还需要node-multiparty为您的端点解析表单数据。然后，您可以使用s3将文件上传到s3。

这是我编辑的一些代码。

角模板

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

我改变吨他从我的代码中获得，所以它可能不适用，但希望它有帮助！

Answer 2

最近一个新软件包被添加到了mean.io上的软件包列表中。这是一种美丽！

只需运行：

$意味着安装平均上传

这将安装包到节点文件夹，但您可以访问你的包指令。

http://mean.io/#!/packages/53ccd40e56eac633a3eee335

在您的表单视图，添加如下内容：

<div class="form-group"> 
     <label class="control-label">Images</label> 
     <mean-upload file-dest="'/packages/photos/'" upload-file-callback="uploadFileArticleCallback(file)"></mean-upload> 
     <br> 
     <ul class="list-group"> 
      <li ng-repeat="image in article.images" class="list-group-item"> 
       {{image.name}} 
       <span class="glyphicon glyphicon-remove-circle pull-right" ng-click="deletePhoto(image)"></span> 
      </li> 
     </ul> 
    </div> 

而在你的控制器：

$scope.uploadFileArticleCallback = function(file) { 
     if (file.type.indexOf('image') !== -1){ 
      $scope.article.images.push({ 
      'size': file.size, 
      'type': file.type, 
      'name': file.name, 
      'src': file.src 
      }); 
     } 
     else{ 
      $scope.article.files.push({ 
      'size': file.size, 
      'type': file.type, 
      'name': file.name, 
      'src': file.src 
      }); 
     } 
    }; 

    $scope.deletePhoto = function(photo) { 
     var index = $scope.article.images.indexOf(photo); 
     $scope.article.images.splice(index, 1); 
    } 

享受！

Answer 3

Mean-upload已被废弃，现在称为“上传”。它在 - https://git.mean.io/orit/upload

Answer 4

我知道这个帖子是旧的。我遇到了它，@kentcdodds有一个我非常喜欢的答案，但他使用的图书馆现在已经过时了，我无法让它们工作。所以在一些研究之后，我想分享一个更新的类似解决方案。采用NG-上传

HTML

<form > 
    <div style="margin-bottom: 15px;"> 
     <button type="file" name="file" id="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">Select File</button> 
    </div> 
</form> 

INCLUDE NG-上传模块

下载，引用文件，包括模块

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

这会给你访问Upload服务。

控制器代码

$scope.uploadFiles = function(file, errFiles) { 
    $scope.f = file; 
    $scope.errFile = errFiles && errFiles[0]; 
    if (file) { 
     file.upload = Upload.upload({ 
      url: 'you-api-endpoint', 
      data: {file: file} 
     }); 

     //put promise and event watchers here if wanted 
    } 
}; 

NODE API代码

所有下面的代码是在一个单独的文件route这是在我的主server.js文件required。

require('./app/app-routes.js')(app, _);

var fs = require('fs'); 
var uuid = require('uuid'); 
var s3 = require('s3fs'); // https://github.com/RiptideElements/s3fs 
var s3Impl = new s3('bucketname', { 
    accessKeyId: '<your access key id>', 
    secretAccessKey: '< your secret access key >' 
}); 

var multiparty = require('connect-multiparty'); 
var multipartyMiddleware = multiparty(); 

module.exports = function(app, _) { 
    app.use(multipartyMiddleware); 


    app.post('/your-api-endpoint',function(req, res){ 

    var file = req.files.file; // multiparty is what allows the file to to be accessed in the req 
    var stream = fs.createReadStream(file.path); 
    var extension = file.path.substring(file.path.lastIndexOf('.')); 
    var destPath = '/' + req.user._id + '/avatar/' + uuid.v4() + extension; 
    var base = 'https://you-bucket-url'; 
    return s3Impl.writeFile(destPath, stream, {ContentType: file.type}).then(function(one){ 
     fs.unlink(file.path); 
     res.send(base + destPath); 
    }); 
}); 

所有我试图做的是上传头像独特的用户。希望这可以帮助！！