如何使用 AngularJS 上传文件并使用 ExpressJS 保存？答案

【问题标题】：How to upload a file with AngularJS and save it with ExpressJS?如何使用 AngularJS 上传文件并使用 ExpressJS 保存？
【发布时间】：2014-07-21 18:34:59
【问题描述】：

我正在为 AngularJS 使用一个名为 angular-file-upload 的指令。我已经设置好了，图片上传工作正常，但是我似乎无法将文件解析到服务器端（快速 js）。

玉：

input.form-input(ng-model="userAvatarFile" ng-file-select="onFileSelect($files)" name="userAvatarFile" type="file")

这是 AngularJS 的代码：

$scope.onFileSelect = function($files) {

    console.log($files);

    for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
        $scope.upload = $upload.upload({
            url: '/api/user/upload', 
            method: 'POST',
            data: {myObj: $scope.userAvatarFile},
            file: file, 
        }).progress(function(evt) {
            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }).success(function(data, status, headers, config) {
            console.log(data);
        });
    }
};

并表示：

exports.upload = function(req, res) {
  console.log(req.body);
  console.log(req.files);
};

控制台总是为 express 打印出以下内容：

 {}
 undefined

有什么想法可能是错的吗？

【问题讨论】：

upload() 函数是一个异步函数。你可以像这样在循环中使用它，你已经发送了数组中的所有文件并保存。
我不太明白你想说什么，你能改写一下吗？

标签： javascript angularjs express

【解决方案1】：

在Connect 3.0 中删除了多部分中间件。 Connect 建议使用connect-multiparty 或connect-busboy。恕我直言connect-busboy 更好，所以这里是如何做到的：

（当然，运行npm install --save connect-busboy）

// Main file, stays the same for all the other examples
var express = require('express'),
    busboy  = require('connect-busboy');

app.use(busboy({ immediate: true }));

// Route file
exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        // fieldname will be 'file', file will be... um... the file (in binary encoding), filename will be the file's name
    });
    req.busboy.on('field', function (key, value) {
        // key will be 'myObj', value will be $scope.userAvatarFile
    });
};

如果要将图像保存到文件中，可以这样做：

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        // saveTo is the temporary path
        var saveTo = path.join(os.tmpDir(), path.basename(fieldname));
        file.pipe(fs.createWriteStream(saveTo));

        // Do stuff with saveTo
    });
};

但是，这是一个安全风险（保存到磁盘，这就是 req.files 不再存在的原因），所以大多数（？）处理文件的库（例如 Cloudinary）提供了 WriteStream（或看起来感觉就像一个）。以下是它与 Cloudinary 的工作方式：

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        var stream = cloudinary.uploader.upload_stream(function(result) { console.log(result); });

        // You should have been able to do file.pipe(stream), but Cloudinary's stream isn't a real WriteStream, but just an object with two functions. Well, the following works too:

        file.on('data', stream.write);
        file.on('end', stream.end);
    });
};

FWIW，我复制了您的代码并对其进行了测试，它运行良好。如果您有任何问题，请告诉我。一周前我遇到了同样的问题，所以我必须调查一下。

【讨论】：

【解决方案2】：

tgkokk's 使用 Cloudinary 的示例不再适用于 Cloudinary v1.1.1。 Cloudinary 更新了 upload_stream 方法以返回一个转换流对象。所以使用 'pipe' 而不是手动向 on('data') 和 on('end') 添加事件。

https://github.com/cloudinary/cloudinary_npm#version-11-upload_stream-change-notes

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        var stream = cloudinary.uploader.upload_stream(function(result) {    console.log(result); 
        });

        // pipe can be used now
        file.pipe(stream);
    });
};

【讨论】：