在Angularjs / Nodejs应用中出现文件上传问题。
我实现了这个angular-file-upload指令。使用它,文件上传适用于所有现代浏览器,但在IE9中失败。通过“失败”我的意思是它的行为就像它正在工作......我可以记录文件上传进度并看到它逐步达到100%,成功处理程序中触发成功日志消息(在错误处理程序中没有触发)但是该文件永远不会出现在上传目录中(在同一台机器上)。
没有任何类型的控制台错误,我将上传目录权限设置为777以排除该错误。
我发现的东西已关闭...... 首先,在IE9中上传的文件从不会触发我在uploadPhoto函数中放置的日志消息,因此路线似乎甚至没有击中(想到在现代浏览器中上传的文件会触发这些日志消息)。此外,在上载后,在开发人员工具的“网络”面板中,“类型”的值不应为text / html,如下所示。
(以下地图映射到:URL, Method, Result, Type, Received
):
/path/to/upload-dir/filename.jpg GET 200 text/html 20.7kb
这是我的文件上传处理程序:
$scope.onFileSelect = function ($file) {
$scope.ajaxVisible = true;
$scope.uploadError = false;
var photo = $file[0];
$scope.upload = $upload.upload({
url: '/upload/photo',
file: photo,
method: 'POST'
}).progress(function (evt) {
}).success(function (data, status, headers, config) {
$scope.toggleUploadForm();
$scope.imgsrc = 'path/to/upload/dir/' + photo.name;
User.currentUser.profile_image = photo.name;
User.updateUser();
$scope.ajaxVisible = false;
}).error(function (err) {
$scope.uploadError = true;
$scope.ajaxVisible = false;
});
};
这是该路由的处理程序(expressjs / node):
app.post('/upload/photo', userAPI.uploadPhoto);
以下是路由处理程序中引用的uploadPhoto:
exports.uploadPhoto = function(req, res) {
logger.info('inside uploadPhoto'); // <-- never reached using IE9
var callbacks = {};
callbacks.uploadSuccess = function(){
res.json('success');
};
callbacks.uploadFailure = function(err){
res.json(400, 'Error uploading image.');
};
user.handlePhotoUpload(req.files, callbacks);
};
最后,将事情交给:
this.handlePhotoUpload = function(params, callbacks) {
logger.log('inside handlePhotoUpload'); // <-- never reached using IE9
if(params.file.mime !== 'image/png' && params.file.mime !== 'image/jpeg' && params.file.mime !== 'image/gif') {
callbacks.uploadFailure('Wrong file type');
return;
}
fs.readFile(params.file.path, function(err, data){
if(err){
callbacks.uploadFailure(err);
}
var newPath = path.resolve("./path/to/upload/dir/" + params.file.filename);
fs.writeFile(newPath, data, function(err) {
if(err){
callbacks.uploadFailure(err);
}
callbacks.uploadSuccess();
});
});
};
该指令使用后端的FileAPI library,并要求Flash处理上传过程。我认为Flash是问题的根源。我错过了一些东西,但不确定它可能是什么。
正如我所说,控制台(在任何浏览器中)和文件上传中没有错误显示所有工作的迹象,除了文件永远不会出现在上传目录中。但是,当通过IE9上传时,从未通过现代浏览器上传时达到的各种日志语句。
关于如何排除故障的建议与解决方案的建议一样受欢迎。
答案 0 :(得分:1)
所以我解决了这个问题。罪魁祸首是我自己的代码(自然......叹息),这就是:
if(params.file.mime !== 'image/png' && params.file.mime !== 'image/jpeg' && params.file.mime !== 'image/gif') {
callbacks.uploadFailure('Wrong file type');
return;
}
由于此指令使用flash进行后备上传(对于旧的,糟糕的浏览器,如IE&lt; = 9),上传的mime类型实际上是application/octet-stream
...没有选中其中一个图像mime类型在上面的代码中。因此,将mime类型添加到我的检查中允许通过flash上传图像(因此,IE <= 9)。
此外,我没有在我的日志中正确使用该错误消息“错误的文件类型”。我有:
callbacks.uploadFailure = function(err){
res.json(400, 'Error uploading image.');
};
正如您所看到的,err
未被使用,因此在记录错误时,特定的,信息性的错误消息会消失,我只会得到相对通用的“错误上传图像。”