我试图使用angular和sails进行简单的文件上传。我对所有这些技术都很新。请你告诉我我的代码有什么问题? 我使用命令创建了一个api调用文件:" sails generate api file"在我的sails服务器和控制器中,我粘贴了这段代码(https://github.com/sails101/file-uploads/blob/master/api/controllers/FileController.js#L15):
/**
* FileController
*
* @description :: Server-side logic for managing files
* @help :: See http://links.sailsjs.org/docs/controllers
*/
module.exports = {
/**
* `FileController.upload()`
*
* Upload file(s) to the server's disk.
*/
upload: function (req, res) {
// e.g.
// 0 => infinite
// 240000 => 4 minutes (240,000 miliseconds)
// etc.
//
// Node defaults to 2 minutes.
res.setTimeout(0);
req.file('avatar')
.upload({
// You can apply a file upload limit (in bytes)
maxBytes: 1000000
}, function whenDone(err, uploadedFiles) {
if (err) return res.serverError(err);
else return res.json({
files: uploadedFiles,
textParams: req.params.all()
});
});
},
/**
* `FileController.s3upload()`
*
* Upload file(s) to an S3 bucket.
*
* NOTE:
* If this is a really big file, you'll want to change
* the TCP connection timeout. This is demonstrated as the
* first line of the action below.
*/
s3upload: function (req, res) {
// e.g.
// 0 => infinite
// 240000 => 4 minutes (240,000 miliseconds)
// etc.
//
// Node defaults to 2 minutes.
res.setTimeout(0);
req.file('avatar').upload({
adapter: require('skipper-s3'),
bucket: process.env.BUCKET,
key: process.env.KEY,
secret: process.env.SECRET
}, function whenDone(err, uploadedFiles) {
if (err) return res.serverError(err);
else return res.json({
files: uploadedFiles,
textParams: req.params.all()
});
});
},
/**
* FileController.download()
*
* Download a file from the server's disk.
*/
download: function (req, res) {
require('fs').createReadStream(req.param('path'))
.on('error', function (err) {
return res.serverError(err);
})
.pipe(res);
}
};
接下来,我制作了一个拍摄照片并显示它的功能。现在我要做的是将该文件发送到我的服务器并存储它。这是我的代码:
$scope.sendPost = function() {
getPosts.getFoo('http://10.0.0.3:1337/user/create?name=temporaryUser&last_name=temporaryLastName4&title=' +
shareData.returnData()[0].title + '&content=' + shareData.returnData()[0].content +
'&image=' + /*shareData.returnData()[0].image*/ + '&category1=' + category1 + '&category2=' +
category2 + '&category3=' + category3 + '&category4=' + category4 + '&category5=' + category5
).then(function(data) {
$scope.items = data;
console.log(shareData.returnData()[0]);
});
$scope.upload = function() {
var url = 'http://localhost:1337/file/upload';
var fd = new FormData();
//previously I had this
//angular.forEach($scope.files, function(file){
//fd.append('image',file)
//});
fd.append('image', shareData.returnData()[0].image);
$http.post(url, fd, {
transformRequest:angular.identity,
headers:{'Content-Type':undefined
}
})
.success(function(data, status, headers){
$scope.imageURL = data.resource_uri; //set it to the response we get
})
.error(function(data, status, headers){
})
}
}
答案 0 :(得分:1)
我认为您的大多数代码都是正确的,但有一点非常重要,您应该在前端和后端都提供相同的“数据名称”。
在您的情况下,后端代码中的上传数据名称为“avatar”:
req.file('avatar')
.upload({
// You can apply a file upload limit (in bytes)
maxBytes: 1000000
}, function whenDone(err, uploadedFiles) {
if (err) return res.serverError(err);
else return res.json({
files: uploadedFiles,
textParams: req.params.all()
});
});
但是,在前端代码中,帖子数据名称是“image”。
fd.append('image', shareData.returnData()[0].image);
我认为这应该是阻止你申请的主要问题。
以下是如何使用角度来远程上传文件的工作版本,而不是适用于我的API http://jsfiddle.net/JeJenny/ZG9re/。
以下是我的后端代码供您参考:
// myApp/api/controllers/FileController.js
module.exports = {
upload: function(req, res) {
var uploadFile = req.file('file')
//console.log(uploadFile);
uploadFile.upload({
dirname: sails.config.zdbconf.attachmentPath,
maxBytes: 100000000
}, function(err, files) {
if (err)
return res.serverError(err);
return res.json({
message: files.length + ' file(s) uploaded successfully!',
files: files
});
});
}
};