Question

我需要使用Angular.js，Node.js和Multer将图像上传到本地文件夹。我正在使用ngFileUpload上传文件。我在下面解释我的代码。

category.html：

<form name="billdata" id="billdata"  enctype="multipart/form-data" novalidate>
 <div ng-repeat="mul in mulImage">
    <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Gallery Image{{$index+1}}:</span>
<div>

<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">
 </div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<div><img ngf-src="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null"><img ng-src="upload/{{mul.filename}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.filename!=''"><input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);"></div>
</span>
</div>
</div>
 <input type="button" class="btn btn-success" ng-click="addGalleryImageDetails(billdata);"  id="saveData" ng-value="buttonName"   style="margin-right:20px;"/>
</form>

此处用户可以选择多个文件，何时点击save按钮，所有文件都应上传到文件夹中。我的控制器端代码如下所示。

$scope.addGalleryImageDetails=function(){
  var imageString='';
  var arrImage=[];
  var imagearr=[];
  if($scope.mulImage[0].image !=null){
  for(var i=0;i<$scope.mulImage.length;i++){
      if($scope.mulImage[i]['image']!=null){
         var newmulpath='';
         var today=(Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
         newmulpath=today+"_"+ $scope.mulImage[i]['image'].name;
         $scope.mulImage[i]['image']=Upload.rename($scope.mulImage[i]['image'], newmulpath);
        arrImage.push({'image':$scope.mulImage[i]['image']});
 }
  }
 }
 if(arrImage.length>0){
       $scope.upload=Upload.upload({
           url: 'uploadAll',
           method: 'POST',
           file: arrImage
}).success(function(data, status, headers, config) {
 }).error(function(data,status){
})
}
}

这里所有多个图像都存储在arrImage json对象中，它将发送到服务器上传到项目文件夹中。

我的服务器端代码如下所示。

server.js：

var port=8989;
var express=require('express');
var morgan = require('morgan');
var http=require('http');
var bodyParser= require('body-parser');
var methodOverride = require('method-override');
var mongo = require('mongojs');
var session = require('express-session');
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' });
var app=module.exports=express();
var server=http.Server(app);
var admin=require('./route/route.js');
app.use(express.static(__dirname + '/public'));     // set the static files location /public/img will be /img for users
app.use(morgan('dev'));                     // log every request to the console
app.use(bodyParser.urlencoded({ extended: false }))    // parse application/x-www-form-urlencoded
app.use(bodyParser.json())    // parse application/json
app.use(methodOverride());                  // simulate DELETE and PUT
app.use(session({secret: 'FGDPlexel',resave: true,saveUninitialized: true}));
app.get('/',function(req,res){
    res.sendFile(__dirname + '/index.html');
})
server.listen(port);
console.log("Server is running on the port"+port);

这里我的要求是所有图像都将以其原始名称存储到项目文件夹中。在这里，我使用multer中间件来存储文件。

如何使用Angular.js，Node.js和Multer将图像保存到项目文件夹中？

0 个答案: