使用 nervgh/angular-file-upload 上传角度文件答案

【问题标题】：angular file upload with nervgh/angular-file-upload使用 nervgh/angular-file-upload 上传角度文件
【发布时间】：2017-01-04 17:07:53
【问题描述】：

我正在从实现https://github.com/nervgh/angular-file-upload 插件的角度上传文件，我的设置是这样的：

var vm = this,
    apiUrl = appConfig.getItem('BASE_API_URL'), // base url;

vm.uploader = $scope.uploader = new FileUploader({
    url: apiUrl + '/invoices/upload',
    headers: {
      "Content-Type": undefined
    }
});

// this function is triggered by a button outside
vm.uploadAll = function () { 
  vm.uploader.uploadAll();
};

在我拥有的 html 上

    <input id="uploadFileButton"
       type="file"
       nv-file-select
       uploader="FUCtrl.uploader"
       multiple
       style="display: none;"/> 
    // the display none is due to that this input is click triggered
    // by an outside button

问题是，对于从客户端开始的 post 请求，我看到了这个

上传了一张图片（理论上），但 Content-Type 未定义，缺少 enctype，另一方面，在服务器端我有这个

var express = require('express'),
    multer  = require('multer'),
    cors = require('cors');

var app = express();

app.use(cors());
app.get('*', function(){});

app.use(multer({dest:'./uploads/'}).single('photo'));

app.post('/upload', function(req, res){

  console.log('hit');

  console.log(req.body); // form fields
  console.log(req.files); // form files
  res.status(204).end();

});

app.listen(3000);

但是当我收到我在控制台上看到的帖子时控制台.log(req.body); // {} 控制台.log(req.files); // 未定义

我无法从 pdf 的上传中获取任何数据

我错过了什么？

【问题讨论】：

标签： javascript angularjs form-data angular-file-upload

【解决方案1】：

嘿伙计，我不知道那个插件。但我正在使用这个https://github.com/danialfarid/ng-file-upload 插件，我觉得很有帮助。这是上传文件的最简单方法。

Upload with form submit and validations:

http://jsfiddle.net/danialfarid/maqbzv15/1118/

Upload multiple files one by one on file select:

http://jsfiddle.net/danialfarid/2vq88rfs/136/

Upload multiple files in one request on file select (html5 only):

http://jsfiddle.net/danialfarid/huhjo9jm/5/

Upload single file on file select:

http://jsfiddle.net/danialfarid/0mz6ff9o/135/

Drop and upload with $watch:

http://jsfiddle.net/danialfarid/s8kc7wg0/400/

Image Crop and Upload

http://jsfiddle.net/danialfarid/xxo3sk41/590/

【讨论】：

和 nervgh 一样
transformRequest 函数将尝试序列化我们的 FormData 对象，因此我们使用标识函数覆盖它以保持数据完整。 Angular POST 和 PUT 请求的默认 Content-Type 标头是 application/json，所以我们也想更改它。通过设置 ‘Content-Type’: undefined，浏览器为我们设置 Content-Type 为 multipart/form-data 并填写正确的边界。手动设置'Content-Type': multipart/form-data 将无法填写请求的边界参数。 jsfiddle.net/bk129/2ff06ud3 这对我有用

【解决方案2】：

我终于在 HTML 中找到了解决方案

nv-file-select

应该是

nv-file-select=""

并删除

headers: {
  "Content-Type": undefined
}

从上传器的配置来看，显然那些东西并没有很好地设置 content-type 和他的边界，所以我把它们拿出来继续工作

【讨论】：