使用 Angular-file-upload 将图片添加到 MEAN.JS 样本
Adding a picture to the MEAN.JS sample with Angular-file-upload
我正在使用 MEAN.JS (https://github.com/meanjs/mean) and angular-file-upload (https://github.com/danialfarid/angular-file-upload)。
MEAN.JS 提供的 "Article" 示例包含两个名为 "title" 和 "content" 的字段。我想修改它并添加一个允许用户上传图片的 "picture" 字段。
我知道我必须修改 MEAN.JS 中的 3 个文件:
~myproject/app/models/article.server.model.js
~myproject/public/modules/articles/controllers/articles.client.controller.js
~myproject/public/modules/articles/views/create-article.client.view.html
但是,我无法修改它们。
我在 MEAN.js
中的工作解决方案
服务器型号:
image:{
type: String,
default: ''
},
服务器控制器:
var item = new Item(JSON.parse(req.body.item));
item.user = req.user;
if(req.files.file)
item.image=req.files.file.name;
else
item.image='default.jpg';
//item.image=
item.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.jsonp(item);
}
});
服务器路由:(需要multer:"npm install multer --save")
var multer = require('multer');
app.use(multer({ dest: './public/uploads/'}));
前端angular控制器:
$scope.image='';
$scope.uploadImage = function(e){
console.log(e.target.files[0]);
$scope.image=e.target.files[0];
};
// Create new Item
$scope.create = function() {
// Create new Item object
var item = new Items ({
name: this.name,
bought: this.bought,
number: this.number,
description: this.description,
warranty: this.warranty,
notes: this.notes
});
ItemsService.saveItem(item,$scope.image);
};
发送请求的服务:
.factory('ItemsService', ['$http','$rootScope', function($http, $rootScope)
{
var service={};
service.saveItem = function(item, image)
{
var fd = new FormData();
fd.append('file', image);
fd.append('item', JSON.stringify(item));
$http.post('items/', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log('success add new item');
})
.error(function(e){
console.log('error add new item', e);
});
};
return service;
}
]);
html 视图:
<div class="form-group">
<label class="control-label" for="name">Image</label>
<div class="controls">
<input type="file" data-ng-model="image" id="image" my-file-upload="uploadImage" required>
{{selectedFile.name}}
</div>
</div>
我的解决方案使用 angular-file-upload on the client and uses connect-multiparty 来处理文件上传。
图像直接存储在限制其大小的数据库中。我没有包含检查图像大小所需的代码。
设置
bower install ng-file-upload --save
bower install ng-file-upload-shim --save
npm i connect-multiparty
npm update
all.js
添加 angular-文件上传脚本
...
'public/lib/ng-file-upload/FileAPI.min.js',
'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/angular-file-upload.min.js',
...
config.js
注入angular-文件上传依赖
...
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];
...
article.client.controller.js
使用angular-文件上传依赖
angular.module('articles').controller('ArticlesController', ['$scope', '$timeout', '$upload', '$stateParams', '$location', 'Authentication', 'Articles',
function($scope, $timeout, $upload, $stateParams, $location, Authentication, Articles) {
$scope.fileReaderSupported = window.FileReader !== null;
// Create new Article
$scope.create = function(picFile) {
console.log('create');
console.log(picFile);
var article = new Articles({
title: this.title,
content: this.content,
image: null
});
console.log(article);
$upload.upload({
url: '/articleupload',
method: 'POST',
headers: {'Content-Type': 'multipart/form-data'},
fields: {article: article},
file: picFile,
}).success(function (response, status) {
$location.path('articles/' + response._id);
$scope.title = '';
$scope.content = '';
}).error(function (err) {
$scope.error = err.data.message;
});
};
$scope.doTimeout = function(file) {
console.log('do timeout');
$timeout( function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
console.log('read');
fileReader.onload = function(e) {
$timeout(function() {
file.dataUrl = e.target.result;
console.log('set url');
});
};
});
};
$scope.generateThumb = function(file) {
console.log('generate Thumb');
if (file) {
console.log('not null');
console.log(file);
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$scope.doTimeout(file);
}
}
};
}
创建-article.client.view.html
更新创建视图以处理文件选择和上传
<section data-ng-controller="ArticlesController">
<div class="page-header">
<h1>New Article</h1>
</div>
<div class="col-md-12">
<form name="articleForm" class="form-horizontal" data-ng-submit="create(picFile)" novalidate>
<fieldset>
<div class="form-group" ng-class="{ 'has-error': articleForm.title.$dirty && articleForm.title.$invalid }">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input name="title" type="text" data-ng-model="title" id="title" class="form-control" placeholder="Title" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="content">Content</label>
<div class="controls">
<textarea name="content" data-ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label" for="articleimage">Article Picture</label>
<div class="controls">
<input id="articleimage" type="file" ng-file-select="" ng-model="picFile" name="file" accept="image/*" ng-file-change="generateThumb(picFile[0], $files)" required="">
<br/>
<img ng-show="picFile[0].dataUrl != null" ng-src="{{picFile[0].dataUrl}}" class="img-thumbnail" height="50" width="100">
<span class="progress" ng-show="picFile[0].progress >= 0">
<div style="width:{{picFile[0].progress}}%" ng-bind="picFile[0].progress + '%'" class="ng-binding"></div>
</span>
<span ng-show="picFile[0].result">Upload Successful</span>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" ng-disabled="!articleForm.$valid" ng-click="uploadPic(picFile)">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
查看-article.client.view.html
更新列表视图以包含图片
<img ng-src="data:image/jpeg;base64,{{article.image}}" id="photo-id" width="200" height="200"/>
列表-articles.client.view.html
更新视图以包含 imgae
<img ng-src="data:image/jpeg;base64,{{article.image}}" id="photo-id" width="40" height="40"/>
article.server.model.js
将图像添加到数据库模型
...
image: {
type: String,
default: ''
},
...
article.server.routes.js
添加新的上传路径使用 connect-multiparty
...
multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty(),
...
app.route('/articleupload')
.post(users.requiresLogin, multipartyMiddleware, articles.createWithUpload);
...
article.server.controller.js
处理新的上传路径 require fs
...
fs = require('fs'),
...
/**
* Create a article with Upload
*/
exports.createWithUpload = function(req, res) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
console.log(req.body.article);
var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;
fs.readFile(file.path, function (err,original_data) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
}
// save image in db as base64 encoded - this limits the image size
// to there should be size checks here and in client
var base64Image = original_data.toString('base64');
fs.unlink(file.path, function (err) {
if (err)
{
console.log('failed to delete ' + file.path);
}
else{
console.log('successfully deleted ' + file.path);
}
});
article.image = base64Image;
article.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.json(article);
}
});
});
};
...
@john prunell 非常感谢你,我终于弄明白了(花了我一个多星期,但我现在对堆栈更舒服了)我已经分叉它来让它上传文件到文件夹:
'exports.createWithUpload = function(req, res) {
var form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
console.log(req.body.article);
var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;
var tmpPath = file.path;
var extIndex = tmpPath.lastIndexOf('.');
var extension = (extIndex < 0) ? '' : tmpPath.substr(extIndex);
var fileName = uuid.v4() + extension;
var destPath = './uploads/' + fileName;
article.image = fileName;
var is = fs.createReadStream(tmpPath);
var os = fs.createWriteStream(destPath);
if(is.pipe(os)) {
fs.unlink(tmpPath, function (err) { //To unlink the file from temp path after copy
if (err) {
console.log(err);
}
});
article.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.jsonp(article);
}
});
}else
return res.json('File not uploaded');
});
};
我现在想做的是分叉你的解决方案,允许以相同的方式上传多张图片,如果你对如何做到这一点有任何见解那将是惊人的,我会让你知道我是如何得到的上。
感谢 Charlie Tupman 提供的最后一个解决方案非常有效。
我只是添加了依赖项:
...
multiparty = require('multiparty'),
uuid = require('uuid'),
...
在导出函数之前更改了两行以改进行为:
...
var destPath = './public/uploads/' + fileName;
article.image = '/uploads/' + fileName;
...
解析为:
exports.createWithUpload = function(req, res) {
var form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
console.log(req.body.article);
var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;
var tmpPath = file.path;
var extIndex = tmpPath.lastIndexOf('.');
var extension = (extIndex < 0) ? '' : tmpPath.substr(extIndex);
var fileName = uuid.v4() + extension;
var destPath = './public/uploads/' + fileName;
article.image = '/uploads/' + fileName;
var is = fs.createReadStream(tmpPath);
var os = fs.createWriteStream(destPath);
if(is.pipe(os)) {
fs.unlink(tmpPath, function (err) { //To unlink the file from temp path after copy
if (err) {
console.log(err);
}
});
article.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.jsonp(article);
}
});
} else
return res.json('File not uploaded');
});
};
我正在使用 MEAN.JS (https://github.com/meanjs/mean) and angular-file-upload (https://github.com/danialfarid/angular-file-upload)。
MEAN.JS 提供的 "Article" 示例包含两个名为 "title" 和 "content" 的字段。我想修改它并添加一个允许用户上传图片的 "picture" 字段。
我知道我必须修改 MEAN.JS 中的 3 个文件:
~myproject/app/models/article.server.model.js
~myproject/public/modules/articles/controllers/articles.client.controller.js
~myproject/public/modules/articles/views/create-article.client.view.html
但是,我无法修改它们。
我在 MEAN.js
中的工作解决方案服务器型号:
image:{
type: String,
default: ''
},
服务器控制器:
var item = new Item(JSON.parse(req.body.item));
item.user = req.user;
if(req.files.file)
item.image=req.files.file.name;
else
item.image='default.jpg';
//item.image=
item.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.jsonp(item);
}
});
服务器路由:(需要multer:"npm install multer --save")
var multer = require('multer');
app.use(multer({ dest: './public/uploads/'}));
前端angular控制器:
$scope.image='';
$scope.uploadImage = function(e){
console.log(e.target.files[0]);
$scope.image=e.target.files[0];
};
// Create new Item
$scope.create = function() {
// Create new Item object
var item = new Items ({
name: this.name,
bought: this.bought,
number: this.number,
description: this.description,
warranty: this.warranty,
notes: this.notes
});
ItemsService.saveItem(item,$scope.image);
};
发送请求的服务:
.factory('ItemsService', ['$http','$rootScope', function($http, $rootScope)
{
var service={};
service.saveItem = function(item, image)
{
var fd = new FormData();
fd.append('file', image);
fd.append('item', JSON.stringify(item));
$http.post('items/', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log('success add new item');
})
.error(function(e){
console.log('error add new item', e);
});
};
return service;
}
]);
html 视图:
<div class="form-group">
<label class="control-label" for="name">Image</label>
<div class="controls">
<input type="file" data-ng-model="image" id="image" my-file-upload="uploadImage" required>
{{selectedFile.name}}
</div>
</div>
我的解决方案使用 angular-file-upload on the client and uses connect-multiparty 来处理文件上传。
图像直接存储在限制其大小的数据库中。我没有包含检查图像大小所需的代码。
设置
bower install ng-file-upload --save
bower install ng-file-upload-shim --save
npm i connect-multiparty
npm update
all.js 添加 angular-文件上传脚本
...
'public/lib/ng-file-upload/FileAPI.min.js',
'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/angular-file-upload.min.js',
...
config.js 注入angular-文件上传依赖
...
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];
...
article.client.controller.js 使用angular-文件上传依赖
angular.module('articles').controller('ArticlesController', ['$scope', '$timeout', '$upload', '$stateParams', '$location', 'Authentication', 'Articles',
function($scope, $timeout, $upload, $stateParams, $location, Authentication, Articles) {
$scope.fileReaderSupported = window.FileReader !== null;
// Create new Article
$scope.create = function(picFile) {
console.log('create');
console.log(picFile);
var article = new Articles({
title: this.title,
content: this.content,
image: null
});
console.log(article);
$upload.upload({
url: '/articleupload',
method: 'POST',
headers: {'Content-Type': 'multipart/form-data'},
fields: {article: article},
file: picFile,
}).success(function (response, status) {
$location.path('articles/' + response._id);
$scope.title = '';
$scope.content = '';
}).error(function (err) {
$scope.error = err.data.message;
});
};
$scope.doTimeout = function(file) {
console.log('do timeout');
$timeout( function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
console.log('read');
fileReader.onload = function(e) {
$timeout(function() {
file.dataUrl = e.target.result;
console.log('set url');
});
};
});
};
$scope.generateThumb = function(file) {
console.log('generate Thumb');
if (file) {
console.log('not null');
console.log(file);
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$scope.doTimeout(file);
}
}
};
}
创建-article.client.view.html 更新创建视图以处理文件选择和上传
<section data-ng-controller="ArticlesController">
<div class="page-header">
<h1>New Article</h1>
</div>
<div class="col-md-12">
<form name="articleForm" class="form-horizontal" data-ng-submit="create(picFile)" novalidate>
<fieldset>
<div class="form-group" ng-class="{ 'has-error': articleForm.title.$dirty && articleForm.title.$invalid }">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input name="title" type="text" data-ng-model="title" id="title" class="form-control" placeholder="Title" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="content">Content</label>
<div class="controls">
<textarea name="content" data-ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label" for="articleimage">Article Picture</label>
<div class="controls">
<input id="articleimage" type="file" ng-file-select="" ng-model="picFile" name="file" accept="image/*" ng-file-change="generateThumb(picFile[0], $files)" required="">
<br/>
<img ng-show="picFile[0].dataUrl != null" ng-src="{{picFile[0].dataUrl}}" class="img-thumbnail" height="50" width="100">
<span class="progress" ng-show="picFile[0].progress >= 0">
<div style="width:{{picFile[0].progress}}%" ng-bind="picFile[0].progress + '%'" class="ng-binding"></div>
</span>
<span ng-show="picFile[0].result">Upload Successful</span>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" ng-disabled="!articleForm.$valid" ng-click="uploadPic(picFile)">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
查看-article.client.view.html 更新列表视图以包含图片
<img ng-src="data:image/jpeg;base64,{{article.image}}" id="photo-id" width="200" height="200"/>
列表-articles.client.view.html 更新视图以包含 imgae
<img ng-src="data:image/jpeg;base64,{{article.image}}" id="photo-id" width="40" height="40"/>
article.server.model.js 将图像添加到数据库模型
...
image: {
type: String,
default: ''
},
...
article.server.routes.js 添加新的上传路径使用 connect-multiparty
...
multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty(),
...
app.route('/articleupload')
.post(users.requiresLogin, multipartyMiddleware, articles.createWithUpload);
...
article.server.controller.js 处理新的上传路径 require fs
...
fs = require('fs'),
...
/**
* Create a article with Upload
*/
exports.createWithUpload = function(req, res) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
console.log(req.body.article);
var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;
fs.readFile(file.path, function (err,original_data) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
}
// save image in db as base64 encoded - this limits the image size
// to there should be size checks here and in client
var base64Image = original_data.toString('base64');
fs.unlink(file.path, function (err) {
if (err)
{
console.log('failed to delete ' + file.path);
}
else{
console.log('successfully deleted ' + file.path);
}
});
article.image = base64Image;
article.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.json(article);
}
});
});
};
...
@john prunell 非常感谢你,我终于弄明白了(花了我一个多星期,但我现在对堆栈更舒服了)我已经分叉它来让它上传文件到文件夹:
'exports.createWithUpload = function(req, res) {
var form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
console.log(req.body.article);
var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;
var tmpPath = file.path;
var extIndex = tmpPath.lastIndexOf('.');
var extension = (extIndex < 0) ? '' : tmpPath.substr(extIndex);
var fileName = uuid.v4() + extension;
var destPath = './uploads/' + fileName;
article.image = fileName;
var is = fs.createReadStream(tmpPath);
var os = fs.createWriteStream(destPath);
if(is.pipe(os)) {
fs.unlink(tmpPath, function (err) { //To unlink the file from temp path after copy
if (err) {
console.log(err);
}
});
article.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.jsonp(article);
}
});
}else
return res.json('File not uploaded');
});
};
我现在想做的是分叉你的解决方案,允许以相同的方式上传多张图片,如果你对如何做到这一点有任何见解那将是惊人的,我会让你知道我是如何得到的上。
感谢 Charlie Tupman 提供的最后一个解决方案非常有效。
我只是添加了依赖项:
...
multiparty = require('multiparty'),
uuid = require('uuid'),
...
在导出函数之前更改了两行以改进行为:
...
var destPath = './public/uploads/' + fileName;
article.image = '/uploads/' + fileName;
...
解析为:
exports.createWithUpload = function(req, res) {
var form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
console.log(req.body.article);
var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;
var tmpPath = file.path;
var extIndex = tmpPath.lastIndexOf('.');
var extension = (extIndex < 0) ? '' : tmpPath.substr(extIndex);
var fileName = uuid.v4() + extension;
var destPath = './public/uploads/' + fileName;
article.image = '/uploads/' + fileName;
var is = fs.createReadStream(tmpPath);
var os = fs.createWriteStream(destPath);
if(is.pipe(os)) {
fs.unlink(tmpPath, function (err) { //To unlink the file from temp path after copy
if (err) {
console.log(err);
}
});
article.save(function(err) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
res.jsonp(article);
}
});
} else
return res.json('File not uploaded');
});
};