[英]How to upload an image and save it to database(mongoose) using mean.js
I am new to the mean stack.我是平均堆栈的新手。 I want to know how to upload an image file to the database(mongoose) through AngularJS.我想知道如何通过 AngularJS 将图像文件上传到数据库(猫鼬)。 Please if you can provide me with some code.请您提供一些代码。 I have searched the internet and I have found this code but it was not working to me我已经搜索了互联网,我找到了这个代码,但它对我不起作用
HTML code: HTML 代码:
<div class="col-md-4 col-xs-8">
<div class="fileinput fileinput-new" data-provides="fileinput">
<img class="profile-pic thumbnail" style="width: 200px; height: 150px;" />
<div>
<span class="btn btn-default btn-file">
<span class="fileinput-new upload-button"><span class="glyphicon glyphicon-upload"></span> Upload New Pic</span>
<input class="file-upload" type="file" data-ng-file-select="onFileSelect($files)" accept="image/png, image/jpeg" >
</span>
</div>
<span data-ng-if="uploadInProgress">Upload progress: {{ uploadProgress }}</span>
<img data-ng-src="uploadedImage" data-ng-if="uploadedImage">
<br>
</div>
</div>
clientside controller.js:客户端controller.js:
$scope.onFileSelect = function(image) {
console.log("image selected" + image);
if (angular.isArray(image)) {
image = image[0];
}
// This is how I handle file types in client side
if (image.type !== 'image/png' && image.type !== 'image/jpeg') {
alert('Only PNG and JPEG are accepted.');
return;
}
$scope.uploadInProgress = true;
$scope.uploadProgress = 0;
$scope.upload = $upload.upload({
url: '/upload/image',
method: 'POST',
file: image
}).progress(function(event) {
$scope.uploadProgress = Math.floor(event.loaded / event.total);
$scope.$apply();
}).success(function(data, status, headers, config) {
$scope.uploadInProgress = false;
// If you need uploaded file immediately
$scope.uploadedImage = JSON.parse(data);
}).error(function(err) {
$scope.uploadInProgress = false;
console.log('Error uploading file: ' + err.message || err);
});
};
My problem is even after selecting a file the controller is not triggering.我的问题是即使选择了控制器没有触发的文件。 I also kept a console to test but it was not working.我还保留了一个控制台进行测试,但它无法正常工作。
This is my response to similar question, which saves the file on the server and put url/name in mongoDB.这是我对类似问题的回答,它将文件保存在服务器上并将 url/name 放入 mongoDB。 https://stackoverflow.com/a/28148042/4494320 https://stackoverflow.com/a/28148042/4494320
It requires multer (npm install multer --save).它需要 multer(npm install multer --save)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.