Verwendung von multer und ng-Datei Upload Wie senden Sie Texte zusammen mit Dateien?

Question

Ich versuche, Bilder mit ne-Datei-Upload zu posten, was gut funktioniert, aber wenn ich versuche, Text hinzuzufügen, wird es nicht mit dem Text gesendet.

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> 

Angular - hier die Winkel lädt die Dateien, die in Ordnung ist, aber wenn ich versuche, das Ereignis hinzuzufügen: $ scope.event auf die Daten, die es scheint nicht zu senden.

//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 - müsste ich hier Änderungen am Speicher vornehmen?

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

}); 

Answer 1

Hallo, ich war in Schwierigkeiten mit dir.
Lösung leicht
Im gitgub war, sagten die Entwickler

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

Also alles, was Sie gerade tun müssen, ist die Textdaten im ng-Datei json Anfrage

setzen

Hier ist das mein Fall

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

(i einfach den asd für den Test)

und das Ergebnis kommt wie diese

habe ich die wichtigen Daten in 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' }, 

und das ist 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 } } 

req.body schließlich

body: { asd: 'asd' }, 

funktioniert es
bitte fragen Sie mich noch etwas.