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

问题描述 投票:0回答:1

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

form.html

<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)"> 

调节器

        .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');
      }
    );
  };
}]);

API

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

page.model.js

    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;

节点服务器

var storage = multer.diskStorage({ //multers disk storage settings
    destination: function (req, file, cb) {
        cb(null, '../uploads/')
    },
    filename: function (req, file, cb) {
        var datetimestamp = Date.now();
        cb(null,  file.originalname)
    }
});
var upload = multer({ //multer settings
                storage: storage
            }).single('file');
/** API path that will upload the files */
app.post('/upload', function(req, res) {
    upload(req,res,function(err){
      console.log('test');
        if(err){
             res.json({error_code:1,err_desc:err});
             return;
        }
         res.json({error_code:0,err_desc:null});
          });
});
angularjs mongodb multer ng-file-upload
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.