2016-05-20 6 views
1

ne-file-uploadを使用して画像を投稿しようとしていますが、これはうまくいきますが、テキストを追加しようとするとテキストとともに送信されません。multerとng-fileアップロードを使用すると、ファイルと一緒にテキストを送信するにはどうすればよいですか?

HTML

<h2>Photo Uploads</h2> 

<p>This is where photos are uploaded. You can upload a single photo or multiple photos if needed.</p> 

<div class="button btn-sm btn btn-default" ngf-select ng-model="files" name="files" ngf-multiple="true">Select</div> 
<input type="text" name="event" ng-model="event"> 
    <button type="submit" ng-click="submit()">submit</button> 

    <pre>{{ event | json }}</pre> 

    <hr> 

アンギュラ - ここでは、角度は、私がイベントを追加しようとすると、罰金ですが、ファイルをアップロードしている:それを送信していないようデータに$のscope.eventを。

//FOR MULTIPLE FILES 
    $scope.uploadFiles = function (files) { 

     if (files && files.length) { 
     for (var i = 0; i < files.length; i++) { 
      Upload.upload({ 
      url: 'api/admin/photos', 
      data: {'event': $scope.event,files: files[i]} 
      }).then(function(resp){ 
      $log.info(resp.config.data.event); 
      $scope.photos.push(resp.data,resp.config.data.event); 
      //$log.info(resp.data); 
      $log.info($scope.photos); 

      getPhotos(); 


      }, 
      function(resp){ 
      console.log('Error status: ' + resp.status); 

      }, 
      function(evt){ 
      var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
      console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name); 
      $scope.progress = progressPercentage; 
      $log.info($scope.progress); 
      }); 
     } 
     } 

    }; 

NodeJS - ここでストレージを変更する必要がありますか?

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, 'public/img') 
    }, 
    filename: function (req, file, cb) { 
    //cb(null, file.originalname + '-' + Date.now()) 
    console.log(req.body); 
    req(req.body); 
    cb(null, file.originalname) 
    } 
}); 

var upload = multer({ storage: storage }); 



//upload photos 
apiRoutes.post('/admin/photos',upload.array('files',20),function(req,res){ 

    console.log(req.body); 

    for (var i = 0; i < req.files.length; i++) { 
     console.log(req.files[i].originalname); 



     //this is to see the other section of photos 
     console.log('the real deal'); 

     var photo = new Photos({ 
     url: req.files[i].filename, 
     name: req.files[i].filename, 

     //event: req.body 
     }); 

     photo.save(function(err,docs){ 
     if(err) throw err; 

     }); 
    }; 


    res.json(req.files); 

}); 

答えて

0

こんにちは私はあなたと同じ問題であった。
ソリューションはgitgubで
簡単だった、開発者は

Specify the file and optional data to be sent to the server. 
Each field including nested objects will be sent as a form data multipart. 
Samples: {pic: file, username: username} 
{files: files, otherInfo: {id: id, person: person,...}} multiple files (html5) 
{profiles: {[{pic: file1, username: username1}, {pic: file2, username: username2}]} nested array multiple files (html5) 
{file: file, info: Upload.json({id: id, name: name, ...})} send fields as json string 
{file: file, info: Upload.jsonBlob({id: id, name: name, ...})} send fields as json blob, 'application/json' content_type 
{picFile: Upload.rename(file, 'profile.jpg'), title: title} send file with picFile key and profile.jpg file name*/ 
*data: {key: file, otherInfo: uploadInfo},/* 

https://github.com/danialfarid/ng-file-upload#npm

を言ったので、あなただけのNG-ファイルのJSON要求にテキストデータを入れてしなければならないすべて

ここに私の場合です

$scope.submit = function() 
    { 
     Upload.upload({ 
      url: serverip+'/make_item', 
      data: {file: $scope.file,asd:"asd"} 
     }).then(function (data) { 
      console.log(data); 
     }); 
    }; 

(私はテストのためにASDを入れて)、その結果がこの

のように来て、私はREQに

headers: 
    { host: '52.78.68.136', 
    connection: 'keep-alive', 
    'content-length': '4366', 
    accept: 'application/json, text/plain, */*', 
    origin: 'null', 
    'user-agent': 'Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36', 
    authorization: 'file', 
    'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryIIep9fVUqmCV1Bg7', 
    'accept-encoding': 'gzip, deflate', 
    'accept-language': 'ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4' }, 

を重要なデータを入れて、これはreq.file

file: 
    { fieldname: 'file', 
    originalname: 'KakaoTalk_20160719_004110244.jpg', 
    encoding: '7bit', 
    mimetype: 'image/jpeg', 
    destination: './public/img/item_img', 
    filename: '1471176191895.jpg', 
    path: 'public/img/item_img/1471176191895.jpg', 
    size: 4067 } } 
です

最終的に要求者

body: { asd: 'asd' }, 

作品は
私に何かお尋ねください。

関連する問題