无法将文件从 AngularJS 上传到 ExpressJs答案

【问题标题】：Fail to upload files from AngularJS to ExpressJs无法将文件从 AngularJS 上传到 ExpressJs
【发布时间】：2014-05-17 10:08:30
【问题描述】：

我现在使用 angular-file-upload 包来上传文件。我按下 item.upload() 后，它声称已成功上传文件，但我看到 req.body 为空。请帮忙！

这是处理它的角度代码：

var uploader = $scope.uploader = $fileUploader.create({
        scope: $scope,                          // to automatically update the html. Default: $rootScope
    url: '/api/teams/upload',
    formData: [
        { key: 'value' }
    ],
    filters: [
        function (item) {                    // first user filter
            $scope.previewImage(item);
            return true;
        }
    ]
});

这里是触发上传的方式：

uploader.bind('afteraddingfile', function (event, item) {
    // console.info(item.file);
    console.info('After adding a file', item);

    // console.log('item.upload();');
    item.upload();
});

最后是 express js 代码：

exports.upload = function(req, res) {
// console.log('req.headers');
// console.log(req.headers);

console.log('req.body');
console.log(req.body);

这有什么问题？

【问题讨论】：

标签： javascript angularjs express mean-stack

【解决方案1】：

首先确保您的 POST 编码为 enctype="multipart/form-data"....

在 Express 4 中，您需要在服务器中设置 body parser：

var bodyParser     = require('dy-parser');
//...

var app            = express();
//...
app.use(bodyParser());  // pull information from html in POST

var busboy = require('connect-busboy');    
app.use(busboy());

在 Express 的早期版本中，您只需从框架本身添加正文解析器，文件将存储在配置的位置：

     app.use(express.bodyParser({limit: '10mb', uploadDir: __dirname + '/public/uploads' }));               // pull information from html in POST

由于版本 4 移除了对连接的支持，现在您需要添加对多部分/表单数据的自定义支持到解析器多/部分 POST，因此您必须执行以下操作：

var fs = require('fs');
var busboy = require('connect-busboy');

//...
app.use(busboy()); 
//...
app.post('/api/teams/upload', function(req, res) {
    var fstream;
    req.pipe(req.busboy);
    req.busboy.on('file', function (fieldname, file, filename) {
        console.log("Uploading: " + filename); 
        fstream = fs.createWriteStream(__dirname + '/files/' + filename);
        file.pipe(fstream);
        fstream.on('close', function () {
            res.redirect('back');
        });
    });
});

在客户端你需要调用$upload.upload来开始上传

【讨论】：