mngodbのng-file-uploadからのng-modelアップロードされたファイルの名前

Question

こんにちは、私は残りのAPIによって平均スタックのアップロード写真に問題があります。アップロードはすでに正常に動作しますが、私の解決方法ではmongodbにアップロードされたファイルの名前をどのように渡すのかという疑問があります。ここに私のコードをアップロードして、私は2つのapiを使用してページのタイトルを1つのフォームのタイトルを別のアップロードのための良い決断？それともページのために1つのAPIで行う方が良いですか？アップロードフォームのファイルアップロードがmongodbのfeaturedImageにアップロードされています。どのように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}); 
      }); 
}); 

Answer 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を参照してください。