来自角度ng-file-upload的ng-model,用于上传的mongodb文件名

时间:2017-12-20 20:01:55

标签: angularjs mongodb multer ng-file-upload

您好我的问题是通过rest api在平均堆栈中上传照片。上传已经工作正常,但我有问题,在我的解决方案中如何传递上传到mongodb的文件名。这是我的上传代码和api我使用两个api' s用于一个表单一个用于页面desc标题另一个用于上传它的好决定?还是最好用一个api页面?上传工作文件上传提交表单但在mongodb featuredImage为null。如何使用ng-file-upload将名称传递给mongodb进行上传,我可以使用ng-model =" pageContent.featuredImage" ??

form.html

$sql = "select * from dog";

$sth = $pdo->prepare($sql);
$sth = $sth->execute();

$result = $sth->fetchAll();

控制器

<textarea ui-tinymce="tinymceOptions"  rows="15" class="form-control" type="text" ng-model="pageContent.content"></textarea>
    <input type="file" ngf-select ng-model="picFile" name="file"
             accept="image/*" ngf-max-size="2MB"
             ngf-model-invalid="errorFile">
    <input type="submit" class="btn btn-success" value="Save" ng-click="uploadPic(picFile)"> 

API

        .controller('PagesAddEditCtrl',['$scope','$log','Upload','$window','$timeout', 'PagesFactory', '$routeParams', '$location', 'flashMessageService','$filter', function($scope, $log,Upload,$window,$timeout, PagesFactory, $routeParams, $location, flashMessageService, $filter) {
      $scope.pageContent = {};
      $scope.pageContent._id = $routeParams.id;
      $scope.heading = "Add a New Page";
      $scope.uploadPic = function(file) {
        file.upload = Upload.upload({
          url: 'http://localhost:3000/upload',
          data: {file: file},
        });
        file.upload.then(function (response) {
          $timeout(function () {
            file.result = response.data;
          });
        }, function (response) {
          if (response.status > 0)
            $scope.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
          // Math.min is to fix IE which reports 200% sometimes
          file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
        }
  $scope.savePage = function(){
    PagesFactory.savePage($scope.pageContent).then(
      function(){
        flashMessageService.setMessage("Page Saved Successfully");
        $location.path('/pages')
      },
      function(){
        $log.error('error saving data');
      }
    );
  };
}]);

page.model.js

    router.post('/pages/add', function(req,res){
    var page = new Page({
        title:req.body.title,
        url:req.body.url,
        content:req.body.content,
        menuIndex: req.body.menuIndex,
        featuredImage: req.body.featuredImage,
        date:new Date(Date.now())
    });

    page.save(function(err){
        if(!err){
            return res.send(200, page);
        }else{
            return res.send(500, err);
        }
    });
});

节点服务器

    var mongoose = require('mongoose');
var Schema = mongoose.Schema;
    var Page = new Schema({
        title: String,
        url: {type:String, index:{unique:true}},
        content: String,
        menuIndex: Number,
        featuredImage: String,
        date: Date  
    });
    var Page = mongoose.model('Page', Page);
    module.exports=Page;

1 个答案:

答案 0 :(得分:1)

将名称作为form/multipart中的单独部分发送:

  $scope.uploadPic = function(file) {
    file.upload = Upload.upload({
      url: 'http://localhost:3000/upload',
      data: {file: file,
             name: file.name},
    });

有关文件属性的更多信息,请参阅MDN JavaScrip Web API Reference - File API