Question

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

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 - 这里的角度是上传文件，这很好但是当我尝试添加事件时：$ 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-file 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上传如何将文本与文件一起发送？

1 个答案: