从bootstrap / angular ejs文件将文件上载到node.js网站

时间:2016-07-27 15:35:27

标签: angularjs 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 = function(){

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()
            }

        });
    });

写文件已创建文件,但我无法读取。多人似乎什么都看不到。

思想?

1 个答案:

答案 0 :(得分:0)

我得到了它的工作。我不得不从快递3升级到快递4。