使用 multer 和 ng-file upload 你如何发送文本和文件？

Question

我正在尝试使用 ne-file-upload post 图片，效果很好，但是当我尝试向其中添加文本时，它不会随文本一起发送。

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 - 这里 angular 正在上传文件，这很好，但是当我尝试将事件添加到数据时：$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);

});

Answer 1

嗨，我遇到了和你一样的麻烦。
解决方案很简单
在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 } }

终于req.body

body: { asd: 'asd' },

有效
还有什么请问我

使用 multer 和 ng-file upload 你如何发送文本和文件？

Using multer and ng-file upload how do you send texts along with files?

angularjs

node.js

ng-file-upload