MEAN堆栈file upload
我最近开始用MEAN Stack进行编程，而且我正在实现某种社交networking。 一直在使用MEAN.io框架来做到这一点。 我现在的主要问题是让file upload工作，因为我想要做的就是将文件从表单接收到AngularJS Controller中，并将其传递给ExpressJS，以便我最终可以将所有内容发送到MongoDB。 （我正在build立一个注册新的用户表单）。
我不想将文件本身存储在数据库中，但我想存储一个链接。
我search了几十页在不同的search查询谷歌，但我找不到任何我可以理解或工作。 一直在寻找几个小时，没有结果。 所以我来到这里
谁能帮我这个？
谢谢 ：）
编辑：也许有点代码会帮助理解。
我正在使用的默认MEAN.io用户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路由，所以一个服务器控制器创build用户（用户模式）并将其发送到MongoDB。
我最近做了这样的事情。 我使用angular度file upload 。 您还需要节点多方为您的端点parsing表单数据。 然后你可以使用s3上传文件到s3。
这是我编辑的一些代码。
angular模板
<button> Upload <input type="file" ng-file-select="onFileSelect($files)"> </button>
angular度控制器
$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); }); }); }); }
我从我的代码中改变了这个，所以它可能无法工作，但希望它是有帮助的！
最近一个新的软件包被添加到了mean.io的软件包列表中。 这是一个美丽！
只需运行：
$ mean install mean-upload
这会将软件包安装到节点文件夹中，但是您可以访问软件包中的指令。
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); }
请享用！
平均上传已经过时，现在被称为“上传”。 它在 – https://git.mean.io/orit/upload中pipe理
我知道这个post是旧的。 我碰到它，@kentcdodds有一个我真正喜欢的答案，但他使用的图书馆现在已经过时，我无法让他们工作。 所以经过一些研究，我有一个更新的类似的解决scheme，我想分享。
使用ng-upload的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-upload模块
下载它，引用文件并包含模块
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代码
下面的所有代码是在我的主server.js文件中required的单独的route文件。
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); }); });
我只是想为用户上传一个独特的头像。 希望这可以帮助！！