上传与猫鼬，防爆preSS和AngularJS图像 [英] Uploading images with Mongoose, Express and AngularJS
问题描述
我知道这已经被问过很多次，我看了几乎所有我能找到的关于主题，分别是：
<一个href=\"http://stackoverflow.com/a/25022437/1031184\">http://stackoverflow.com/a/25022437/1031184
<一个href=\"http://stackoverflow.com/questions/5149545/uploading-images-using-node-js-ex$p$pss-and-mongoose\">Uploading如何使用Node.js，防爆preSS和猫鼬图像
这些是到目前为止，我已经找到了最好的。我的问题是寿，他们仍然不是很清楚，很少有在线文档在所有关于这一点，并讨论似乎针对人谁是更先进的比我。
因此，与我会真的很喜欢它，如果有人可以请走，虽然我如何上传使用猫鼬，防爆preSS和放图像; AngularJS。我实际使用平均fullstack。 （该发电机为precise - <一个href=\"https://github.com/DaftMonk/generator-angular-fullstack\">https://github.com/DaftMonk/generator-angular-fullstack)
AddController：
使用严格的;angular.module（'lumicaApp'）
.controller（'ProjectAddCtrl'，['$范围，$位置，$日志'，'projectsModel'，'用户'，'种'，函数（$范围，$位置，$日志，projectsModel，用户，类型）{
$ scope.dismiss =功能（）{
$ $范围解雇（）。
}; $ scope.users =用户;
$ scope.types =类型; $ scope.project = {
名称：空，
类型：空，
图片：{
缩略图：//空我想在这里补充_id与猫鼬填充引用上传的图片。
}，
用户：空
}; $ scope.save =功能（）{
$ log.info（$ scope.project）;
projectsModel.post（$ scope.project）。然后（函数（项目）{
$ $范围解雇（）。
}）;
} }]）;
我要添加的图片ID参考 project.images.thumbnail 但我想存储使用下面的架构的图像对象内的所有信息：
使用严格的; VAR猫鼬=要求（'猫鼬'），
模式= mongoose.Schema; VAR ImageSchema =新模式（{
文件名：字符串，
网址：字符串，
的contentType：字符串，
大小：字符串，
尺寸：字符串
}）; module.exports = mongoose.model（图像，ImageSchema）;
我还增加了以下<一个href=\"https://github.com/nervgh/angular-file-upload\">https://github.com/nervgh/angular-file-upload我的亭子包。
正如我说我只是无法弄清楚如何将其结合在一起。我甚至不知道什么，我试图做的是不是正确的方法。
----------------------------------------------- --------------------------- \\
更新：
下面是我现在，我已经加入了一些意见的细节，我想它是如何工作的，不幸的是我还没有成功地得到这个工作，我甚至不能获得图像开始上传，没关系上传到S3。对不起，是一个痛苦的，但我只是找到这个特别混乱，这让我惊讶。
客户端/应用/人/添加/ add.controller.js
使用严格的;angular.module（'lumicaApp'）
.controller（'AddPersonCtrl'，['$范围，$ HTTP，$位置，$窗口'，'$日志，验证，FileUploader'，'项目'，'usersModel'功能（$范围，$ HTTP，$位置$窗口，$日志，验证，FileUploader，项目，usersModel）{
$ scope.dismiss =功能（）{
$ $范围解雇（）。
}; $ scope.newResource = {}; //上传简介的图片
$ scope.onUploadSelect =功能（$文件）{
$ scope.newResource.newUploadName = $文件[0]。名称; $ HTTP
。员额（'/ API /上传'，{
uploadName：newResource.newUploadName，
上传：newResource.newUpload
}）
.success（功能（数据）{
newResource.upload =数据; //稍后保存
}）;
}; $ log.info（$ scope.newResource）; //获取项目清单
$ scope.projects =项目; //注册新用户
$ scope.user = {};
$ scope.errors = {};
$ scope.register =功能（形式）{
$ scope.submitted = TRUE; 如果（表格$有效）{
Auth.createUser（{
姓：$ scope.user.firstName，
名字：$ scope.user.lastName，
用户名：$ scope.user.username，
profileImage：$ scope.user.profileImage，//我想在这里添加对图像的_id参考我可以用'ImageSchema填充它用猫鼬获得图像细节（名称，网址，文件大小，则contentType，ETC）
分配：{
团队：空，
项目：$ scope.user.assigned.projects
}，
电子邮件：$ scope.user.email，
密码：$ scope.user.password
}）
。然后（函数（）{
//创建帐户，重定向到家庭
//$location.path('/'）;
$ $范围解雇（）。
}）
.catch（功能（错误）{
ERR = err.data;
$ scope.errors = {}; //匹配猫鼬的错误，表单字段更新有效性
angular.forEach（err.errors，功能（错误，场）{
形式[现场] $ setValidity（'猫鼬'，虚假）。
$ scope.errors [现场] =返回Error.message;
}）;
}）;
}
}; $ scope.loginOauth =功能（供应商）{
$ window.location.href ='/认证/'+供应商;
}; }]）;
服务器/ API /图像/ image.model.js 我想在这里存储所有的图像信息，并使用它来填充 profileImage 中人们控制器。
使用严格的; VAR猫鼬=要求（'猫鼬'），
模式= mongoose.Schema; VAR ImageSchema =新模式（{
文件名：字符串，
网址：字符串，//应该图像的URL存储在S3。
的contentType：字符串，
大小：字符串，
尺寸：字符串
}）; module.exports = mongoose.model（图像，ImageSchema）;
客户端/应用/人/添加/ add.jade
.modal头
h3.modal标题添加的{{title}}
.modal体
形式（ID =添加用户NAME =形式，NG-提交='寄存器（表），NOVALIDATE =''）
.FORM组（NG-CLASS ='{有不成功：form.firstName $有效和放大器;＆安培;提交\\
有错误：form.firstName $无效和放大器;＆安培;提交}'）
标签名
input.form控制（类型=文本，名字='的firstName'，NG-模式='user.firstName'，需要=''）
p.help块（NG-秀='$ form.firstName＆error.required放大器;＆安培;提交）
|第一名称是必需的 .FORM组（NG-CLASS ='{有不成功：form.lastName $有效和放大器;＆安培;提交\\
有错误：form.lastName $无效和放大器;＆安培;提交}'）
标签姓
input.form控制（类型=文本，名字='lastName的'，NG-模式='user.lastName'，需要=''）
p.help块（NG-秀='$ form.lastName＆error.required放大器;＆安培;提交）
|姓氏是必需的 .FORM组（NG-CLASS ='{有不成功：form.username $有效和放大器;＆安培;提交\\
有错误：form.username $无效和放大器;＆安培;提交}'）
标签用户名
input.form控制（类型=文本，名字='用户名'，NG-模式='user.username'，需要=''）
p.help块（NG-秀='$ form.username＆error.required放大器;＆安培;提交）
|姓氏是必需的 //上传头像这里
.FORM组
标签简介的图片
输入（类型=文件NG-文件选择=onUploadSelect（$文件）NG模型=newResource.newUpload） .FORM组（NG-CLASS ='{有不成功：form.email $有效和放大器;＆安培;提交\\
有错误：form.email $无效和放大器;＆安培;提交}'）
标签电子邮件
input.form控制（类型=电子邮件，名字=电子邮件，NG-模式='user.email'，需要=''，猫鼬错误=''）
p.help块（NG-秀='$ form.email＆error.email放大器;＆安培;提交）
|看起来并不像一个有效的电子邮件。
p.help块（NG-秀='$ form.email＆error.required放大器;＆安培;提交）
|你的电子邮箱地址是什么？
p.help块（NG-秀='form.email。$ error.mongoose'）
| {{errors.email}} .FORM组（NG-CLASS ='{有不成功：form.password $有效和放大器;＆安培;提交\\
有错误：form.password $无效和放大器;＆安培;提交}'）
标签密码
input.form控制（类型='密码'，名字='密码'，NG-模式='user.password的'，NG-= MINLENGTH'3'，需要=''，猫鼬错误=''）
p.help块（纳克秀='（form.password $ error.minlength || form.password error.required $）及。＆放大器;提交'）
|密码必须至少为3个字符。
p.help块（NG-秀='form.password。$ error.mongoose'）
| {{errors.password}} .FORM组
标签分配项目（S）
BR
选择（多NG选项=project._id作为project.name在项目的项目NG模型=user.assigned.projects）
button.btn.btn小学（NG-提交='寄存器（表））保存 pre（NG-绑定=用户| JSON）
.modal躯
button.btn.btn小学（类型=提交的形式=添加用户），保存
button.btn.btn预警（NG-点击='解雇（）'）取消
服务器/ API /上传/ index.js
使用严格的;VAR前preSS =要求（'前preSS'）;
VAR控制器=要求（'./ upload.controller'）;VAR路由器=前press.Router（）;//router.get('/'，controller.index）;
//router.get('/:id'，controller.show）;
router.post（'/'，controller.create）;
//router.put('/:id'，controller.update）;
//router.patch('/:id'，controller.update）;
//router.delete('/:id'，controller.destroy）;module.exports =路由器;
服务器/ API /上传/ upload.controller.js
使用严格的;VAR _ =要求（'lodash'）;
// VAR上传=要求（'./ upload.model'）;
VAR AWS =要求（AWS-SDK'）;
无功配置=要求（'../../配置/环境）;
VAR randomString =要求（'../../组件/ randomString'）;//创建一个数据库中的新的上传。
exports.create =功能（REQ，RES）{
VAR S3 =新aws.S3（）;
变种夹= randomString.generate（20）; //我想我这样做是因为当用户下载文件时，将有原来的文件名。
VAR匹配= req.body.upload.match（/数据：（[A-ZA-Z - + \\ /] +）;的base64，（+）/）; 如果（匹配===空|| matches.length！== 3）{
返回的HandleError（RES，无效输入字符串'）;
} 变种uploadBody =新缓冲液（比赛[2]，'的base64'）; VAR PARAMS = {
铲斗：config.aws.bucketName，
关键字：文件夹+'/'+ req.body.uploadName，
身体：uploadBody，
ACL：公共 - 读
}; s3.putObject（参数，可以函数（ERR，数据）{
如果（ERR）
的console.log（ERR）
其他{
的console.log（成功上传数据到我的上载/+文件夹+/+ req.body.uploadName）;
返回res.json（{
名称：req.body.uploadName，
斗：config.aws.bucketName，
键：文件夹
}）;
}
}）;
};功能的HandleError（RES，ERR）{
返回res.send（500，ERR）;
}
服务器/配置/环境/ development.js
AWS：{
键：XXXXXXXXXXXX，
成功秘诀：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'，
区域：'悉尼'，
bucketName：我的上载
}
这一切code是直出，在这个严重依赖大文件上传和图像的项目。绝对检出<一个href=\"https://github.com/nervgh/angular-file-upload\">https://github.com/nervgh/angular-file-upload
在我看来，地方：
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签＆gt;文件上传＆LT; /标签＆gt;
＆LT;输入类型=文件NG-文件选择=onUploadSelect（$文件）NG模型=newResource.newUpload＆GT;
＆LT; / DIV＆GT;
使用模块 angularFileUpload 然后我有我的控制器：
$ scope.onUploadSelect =功能（$文件）{
$ scope.newResource.newUploadName = $文件[0]。名称;
};
<一个href=\"https://github.com/nervgh/angular-file-upload\">https://github.com/nervgh/angular-file-upload
当用户点击上传这个被在那里我发送的文件执行的，被上传：
$ HTTP
。员额（'/ API /上传'，{
uploadName：newResource.newUploadName，
上传：newResource.newUpload
}）
.success（功能（数据）{
newResource.upload =数据; //稍后保存
}）;
此请求被发送到一个控制器，看起来是这样的：
使用严格的;VAR _ =要求（'lodash'）;
VAR AWS =要求（AWS-SDK'）;
无功配置=要求（'../../配置/环境）;
VAR randomString =要求（'../../组件/ randomString'）;//创建一个数据库中的新的上传。
exports.create =功能（REQ，RES）{
VAR S3 =新aws.S3（）;
变种夹= randomString.generate（20）; //我想我这样做是因为当用户下载文件时，将有原来的文件名。
VAR匹配= req.body.upload.match（/数据：（[A-ZA-Z - + \\ /] +）;的base64，（+）/）; 如果（匹配===空|| matches.length！== 3）{
返回的HandleError（RES，无效输入字符串'）;
} 变种uploadBody =新缓冲液（比赛[2]，'的base64'）; VAR PARAMS = {
铲斗：config.aws.bucketName，
关键字：文件夹+'/'+ req.body.uploadName，
身体：uploadBody，
ACL：公共 - 读
}; s3.putObject（参数，可以函数（ERR，数据）{
如果（ERR）
的console.log（ERR）
其他{
的console.log（成功上传数据csk3的上载/+文件夹+/+ req.body.uploadName）;
返回res.json（{
名称：req.body.uploadName，
斗：config.aws.bucketName，
键：文件夹
}）;
}
}）;
};功能的HandleError（RES，ERR）{
返回res.send（500，ERR）;
}
服务器/组件/ randomString / index.js
使用严格的;module.exports.generate =功能（正文长度）{
正文长度= ||正文长度10;
变种文字='';
VAR可能='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 对于（VAR I = 0; I＆LT;正文长度;我++）{
文字+ = possible.charAt（Math.floor（的Math.random（）* possible.length））;
} 返回文本;
};
服务器/配置/环境/ development.js
服务器/ API /上传/ upload.controller.js
I know this has been asked many times before, and I have read almost all I could find about the subject, namely:
http://stackoverflow.com/a/25022437/1031184
Uploading images using Node.js, Express, and Mongoose
Those are the best I have found so far. My problem is tho that they still aren't very clear, there is very little documentation online at all about this and the discussion seems aimed at people who are much more advanced than I am.
So with that I would really love it if someone could please walk me though how to upload images using Mongoose, Express & AngularJS. I am actually using the MEAN fullstack. (this generator to be precise – https://github.com/DaftMonk/generator-angular-fullstack)
AddController:
'use strict';
angular.module('lumicaApp')
.controller('ProjectAddCtrl', ['$scope', '$location', '$log', 'projectsModel', 'users', 'types', function ($scope, $location, $log, projectsModel, users, types) {
$scope.dismiss = function () {
$scope.$dismiss();
};
$scope.users = users;
$scope.types = types;
$scope.project = {
name: null,
type: null,
images: {
thumbnail: null // I want to add the uploaded images _id here to reference with mongoose populate.
},
users: null
};
$scope.save = function () {
$log.info($scope.project);
projectsModel.post($scope.project).then(function (project) {
$scope.$dismiss();
});
}
}]);
I want to add the Images ID reference to project.images.thumbnail but I want to store all the information inside an Image Object using the following Schema:
'use strict';
var mongoose = require('mongoose'),
Schema = mongoose.Schema;
var ImageSchema = new Schema({
fileName: String,
url: String,
contentType: String,
size: String,
dimensions: String
});
module.exports = mongoose.model('Image', ImageSchema);
I have also added the following https://github.com/nervgh/angular-file-upload to my bower packages.
As I say I just can't figure out how to tie it all together. And I'm not even sure if what I am trying to do is the correct way either.
--------------------------------------------------------------------------\
UPDATE:
Here is what I now have, I have added some comments detailing how I would like it to work, unfortunately I still haven't managed to get this working, I can't even get the image to start uploading, never mind uploading to S3. Sorry to be a pain but I am just finding this particularly confusing, which surprises me.
client/app/people/add/add.controller.js
'use strict';
angular.module('lumicaApp')
.controller('AddPersonCtrl', ['$scope', '$http', '$location', '$window', '$log', 'Auth', 'FileUploader', 'projects', 'usersModel', function ($scope, $http, $location, $window, $log, Auth, FileUploader, projects, usersModel) {
$scope.dismiss = function () {
$scope.$dismiss();
};
$scope.newResource = {};
// Upload Profile Image
$scope.onUploadSelect = function($files) {
$scope.newResource.newUploadName = $files[0].name;
$http
.post('/api/uploads', {
uploadName: newResource.newUploadName,
upload: newResource.newUpload
})
.success(function(data) {
newResource.upload = data; // To be saved later
});
};
$log.info($scope.newResource);
//Get Projects List
$scope.projects = projects;
//Register New User
$scope.user = {};
$scope.errors = {};
$scope.register = function(form) {
$scope.submitted = true;
if(form.$valid) {
Auth.createUser({
firstName: $scope.user.firstName,
lastName: $scope.user.lastName,
username: $scope.user.username,
profileImage: $scope.user.profileImage, // I want to add the _id reference for the image here to I can populate it with 'ImageSchema' using mongoose to get the image details(Name, URL, FileSize, ContentType, ETC)
assigned: {
teams: null,
projects: $scope.user.assigned.projects
},
email: $scope.user.email,
password: $scope.user.password
})
.then( function() {
// Account created, redirect to home
//$location.path('/');
$scope.$dismiss();
})
.catch( function(err) {
err = err.data;
$scope.errors = {};
// Update validity of form fields that match the mongoose errors
angular.forEach(err.errors, function(error, field) {
form[field].$setValidity('mongoose', false);
$scope.errors[field] = error.message;
});
});
}
};
$scope.loginOauth = function(provider) {
$window.location.href = '/auth/' + provider;
};
}]);
server/api/image/image.model.js I would like to store all image information here and use this to populate profileImage in people controller.
'use strict';
var mongoose = require('mongoose'),
Schema = mongoose.Schema;
var ImageSchema = new Schema({
fileName: String,
url: String, // Should store the URL of image on S3.
contentType: String,
size: String,
dimensions: String
});
module.exports = mongoose.model('Image', ImageSchema);
client/app/people/add/add.jade
.modal-header
h3.modal-title Add {{ title }}
.modal-body
form(id="add-user" name='form', ng-submit='register(form)', novalidate='')
.form-group(ng-class='{ "has-success": form.firstName.$valid && submitted,\
"has-error": form.firstName.$invalid && submitted }')
label First Name
input.form-control(type='text', name='firstName', ng-model='user.firstName', required='')
p.help-block(ng-show='form.firstName.$error.required && submitted')
| First name is required
.form-group(ng-class='{ "has-success": form.lastName.$valid && submitted,\
"has-error": form.lastName.$invalid && submitted }')
label Last Name
input.form-control(type='text', name='lastName', ng-model='user.lastName', required='')
p.help-block(ng-show='form.lastName.$error.required && submitted')
| Last name is required
.form-group(ng-class='{ "has-success": form.username.$valid && submitted,\
"has-error": form.username.$invalid && submitted }')
label Username
input.form-control(type='text', name='username', ng-model='user.username', required='')
p.help-block(ng-show='form.username.$error.required && submitted')
| Last name is required
// Upload Profile Picture Here
.form-group
label Profile Image
input(type="file" ng-file-select="onUploadSelect($files)" ng-model="newResource.newUpload")
.form-group(ng-class='{ "has-success": form.email.$valid && submitted,\
"has-error": form.email.$invalid && submitted }')
label Email
input.form-control(type='email', name='email', ng-model='user.email', required='', mongoose-error='')
p.help-block(ng-show='form.email.$error.email && submitted')
| Doesn't look like a valid email.
p.help-block(ng-show='form.email.$error.required && submitted')
| What's your email address?
p.help-block(ng-show='form.email.$error.mongoose')
| {{ errors.email }}
.form-group(ng-class='{ "has-success": form.password.$valid && submitted,\
"has-error": form.password.$invalid && submitted }')
label Password
input.form-control(type='password', name='password', ng-model='user.password', ng-minlength='3', required='', mongoose-error='')
p.help-block(ng-show='(form.password.$error.minlength || form.password.$error.required) && submitted')
| Password must be at least 3 characters.
p.help-block(ng-show='form.password.$error.mongoose')
| {{ errors.password }}
.form-group
label Assign Project(s)
br
select(multiple ng-options="project._id as project.name for project in projects" ng-model="user.assigned.projects")
button.btn.btn-primary(ng-submit='register(form)') Save
pre(ng-bind="user | json")
.modal-footer
button.btn.btn-primary(type="submit" form="add-user") Save
button.btn.btn-warning(ng-click='dismiss()') Cancel
server/api/upload/index.js
'use strict';
var express = require('express');
var controller = require('./upload.controller');
var router = express.Router();
//router.get('/', controller.index);
//router.get('/:id', controller.show);
router.post('/', controller.create);
//router.put('/:id', controller.update);
//router.patch('/:id', controller.update);
//router.delete('/:id', controller.destroy);
module.exports = router;
server/api/upload/upload.controller.js
'use strict';
var _ = require('lodash');
//var Upload = require('./upload.model');
var aws = require('aws-sdk');
var config = require('../../config/environment');
var randomString = require('../../components/randomString');
// Creates a new upload in the DB.
exports.create = function(req, res) {
var s3 = new aws.S3();
var folder = randomString.generate(20); // I guess I do this because when the user downloads the file it will have the original file name.
var matches = req.body.upload.match(/data:([A-Za-z-+\/].+);base64,(.+)/);
if (matches === null || matches.length !== 3) {
return handleError(res, 'Invalid input string');
}
var uploadBody = new Buffer(matches[2], 'base64');
var params = {
Bucket: config.aws.bucketName,
Key: folder + '/' + req.body.uploadName,
Body: uploadBody,
ACL:'public-read'
};
s3.putObject(params, function(err, data) {
if (err)
console.log(err)
else {
console.log("Successfully uploaded data to my-uploads/" + folder + '/' + req.body.uploadName);
return res.json({
name: req.body.uploadName,
bucket: config.aws.bucketName,
key: folder
});
}
});
};
function handleError(res, err) {
return res.send(500, err);
}
server/config/environment/development.js
aws: {
key: 'XXXXXXXXXXXX',
secret: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
region: 'sydney',
bucketName: 'my-uploads'
}
All of this code is straight out of a project that depends heavily on this for large file uploads and images. Definitely checkout https://github.com/nervgh/angular-file-upload
In my view somewhere:
<div class="form-group">
<label>File Upload</label>
<input type="file" ng-file-select="onUploadSelect($files)" ng-model="newResource.newUpload">
</div>
Using the module angularFileUpload I then have in my controller:
$scope.onUploadSelect = function($files) {
$scope.newResource.newUploadName = $files[0].name;
};
https://github.com/nervgh/angular-file-upload
When the user clicks upload this gets executed where I send the file to be uploaded:
$http
.post('/api/uploads', {
uploadName: newResource.newUploadName,
upload: newResource.newUpload
})
.success(function(data) {
newResource.upload = data; // To be saved later
});
This request is sent to a controller that looks something like this:
'use strict';
var _ = require('lodash');
var aws = require('aws-sdk');
var config = require('../../config/environment');
var randomString = require('../../components/randomString');
// Creates a new upload in the DB.
exports.create = function(req, res) {
var s3 = new aws.S3();
var folder = randomString.generate(20); // I guess I do this because when the user downloads the file it will have the original file name.
var matches = req.body.upload.match(/data:([A-Za-z-+\/].+);base64,(.+)/);
if (matches === null || matches.length !== 3) {
return handleError(res, 'Invalid input string');
}
var uploadBody = new Buffer(matches[2], 'base64');
var params = {
Bucket: config.aws.bucketName,
Key: folder + '/' + req.body.uploadName,
Body: uploadBody,
ACL:'public-read'
};
s3.putObject(params, function(err, data) {
if (err)
console.log(err)
else {
console.log("Successfully uploaded data to csk3-uploads/" + folder + '/' + req.body.uploadName);
return res.json({
name: req.body.uploadName,
bucket: config.aws.bucketName,
key: folder
});
}
});
};
function handleError(res, err) {
return res.send(500, err);
}
server/components/randomString/index.js
'use strict';
module.exports.generate = function(textLength) {
textLength = textLength || 10;
var text = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for(var i = 0; i < textLength; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
};
server/config/environment/development.js
server/api/upload/upload.controller.js
这篇关于上传与猫鼬，防爆preSS和AngularJS图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
