2016-07-27 45 views
0

因此,这是我第三天试图弄清楚这一点,所以我想我会寻求一些帮助。从bootstrap/angular ejs文件上传文件到node.js网站

我在想方设法上传带有文件名或关键字的文件,以便稍后可以搜索文件。我将它们保存到数据集中,以便当我想在流程中添加另一个步骤时,我可以搜索已经上传的图像,以便它们可以重复使用。至少这是目标,但我似乎无法获得上传文件的第一步。

在EJS文件,我有这样的形式:

<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">{{modal_header}}</h4> 
    </div> 
    <div class="modal-body"> 
    <form > 
      <div class="form-group"> 
      <label for="ProblemInput">Step</label> 
      <input type="text" class="form-control" id="ProblemInput" placeholder="Step Number" ng-model="step"> 
      </div> 
      <p class="form-group"> 
      <label for="DescriptionInput">Description</label> 
      <textarea class="form-control" id="DescriptionInput" placeholder="Detail Description" ng-model="description"></textarea> 
      </p> 
      <input 
      type="file" 
      ngf-select 
      ng-model="file" 
      name="file" 
      ngf-pattern="'image/*'" 
      accept="image/*" 
      ngf-max-size="20MB" 
      /> 
     Image thumbnail: <img style="width:100px;" ngf-thumbnail="file || '/thumb.jpg'"/> 
     <i ng-show="file.$error.required">*required</i><br> 
     <i ng-show="file.$error.maxSize">File too large 
     {{file.size/1000000|number:1}}MB: max 20M</i> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <!-- <button type="button" data-ng-click="SaveNAdd()" class="btn btn-default" >Save and Add Another</button> --> 
    <button type="button" ng-hide="_id" data-ng-click="Save()" class="btn btn-default" data-dismiss="modal">Save</button> 
    <button type="button" ng-show="_id" data-ng-click="Update()" class="btn btn-default" data-dismiss="modal">Update</button> 
    <button type="button" data-ng-click="Reset()" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 

在JS控制器,我有这样的: (刚工作的保存开始)

$ scope.Save =函数(){

var data = 
{ 
    Problem: $scope.problem 
    ,description: $scope.description 
    ,resolution: $scope.resolution 
    ,images : $scope.file 
    ,id : $scope._id 

}; 


    console.log($scope.m_problem._id); 
    $http.post("/kbasefull/" + $scope.m_problem._id + "/scriptAdd", data). 
     success(function(data) { $scope.m_datalist = data; Reset();}) 
     .error(function(data) {console.log(data + "failure");}); 
//} 
} 

在节点服务器,我有这样的:

var multer = require('multer'); 
var upload = multer({ dest: './public/kbase_img/'}); 

    app.post('/KBasefull/:m_id/scriptAdd', upload.single('req.body.images'), function(req, res) { 
     console.log(req.body.file); 
     m_Kbase_data.find({_id : req.params.m_id}, function(err, kbase_data){ 
      if (err){ 
       console.log(err); 
      } 
      if (!kbase_data.length){ 
       console.log("No Kbase Data!"); 
       res.render('kbase', { Problem : JSON.stringify("") }); 

      } 
      else{ 
       console.log(kbase_data[0]._id); 
       //res.render('kbasefull', { Problem : JSON.stringify(kbase_data[0])}); 

//    var sampleFile = req.body.file; 
//    require("fs").writeFile("./public/kbase_img/out.png", sampleFile.data, 'base64', function(err) { 
//     console.log(err); 
//     }); 

       console.log(req.body) // form fields 
       console.log(req.file) // form files 
       res.status(204).end() 
      } 

     }); 
    }); 

写文件创建了一个文件,但我看不懂它。多层似乎没有看到任何东西。

想法?

+0

我在后期例程中获取文件。在我的console.log(req.body)中,我有一个图像变量:images:{'$ ngfDataUrl':'data:image/png; base64,iVBORw0KGgoAAAANSUhEUgA ...... – user269964

+0

我注意到有角度的一面我有文件名和最后修改和我可以看到的其他东西。但是,我没有在邮件一方。我认为我没有得到完整的记录。 – user269964

回答

0

我明白了。我不得不从快递3升级到快递4.