Javascript 如何用AngularJS上传文件并用ExpressJS保存?
我正在使用AngularJS指令,称为AngularFile upload。我已经设置好了,图像上传工作正常,但是我似乎无法将文件解析到服务器端(expressjs) 杰德: 这是AngularJS的代码:Javascript 如何用AngularJS上传文件并用ExpressJS保存?,javascript,angularjs,express,Javascript,Angularjs,Express,我正在使用AngularJS指令,称为AngularFile upload。我已经设置好了,图像上传工作正常,但是我似乎无法将文件解析到服务器端(expressjs) 杰德: 这是AngularJS的代码: $scope.onFileSelect = function($files) { console.log($files); for (var i = 0; i < $files.length; i++) { var file = $files[i];
$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);
});
}
};
对于express,控制台始终打印以下内容:
{}
undefined
有什么问题吗?中删除了多部分中间件。Connect建议使用或。IMHO
connect busboy
更好,下面介绍如何操作:
(当然,运行npm安装--save connect busboy
)
如果要将图像保存到文件中,可以执行以下操作:
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,我复制了你的代码并测试了它,它工作得很好。如果你有任何问题,请告诉我。一周前我也遇到了同样的问题,所以我开始研究它。使用Cloudinary的示例不再适用于Cloudinary v1.1.1。Cloudinary更新了upload_stream方法以返回Transform stream对象。因此,使用“管道”而不是手动将事件添加到on('data')和on('end')
upload()函数是一个异步函数。。你可以像这样在循环中使用它,你已经发送了数组中的所有文件并保存了。我不太明白你想说什么,你能重写它吗?
// 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
});
};
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);
});
};
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);
});
};