Angularjs,文件上传和IE9

时间:2014-02-14 22:09:57

标签: node.js angularjs file-upload

在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上传时,从未通过现代浏览器上传时达到的各种日志语句。

关于如何排除故障的建议与解决方案的建议一样受欢迎。

1 个答案:

答案 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未被使用,因此在记录错误时,特定的,信息性的错误消息会消失,我只会得到相对通用的“错误上传图像。”