node.js – Angularjs,文件上传和IE9

在 Angularjs / Nodejs应用程序中出现文件上载问题.

我实现了这个angular-file-upload指令.使用它,文件上传适用于所有现代浏览器,但在IE9中失败.通过“失败”我的意思是它的行为就像它正在工作……我可以记录文件上传进度并看到它逐步达到100％,成功处理程序中触发成功日志消息(在错误处理程序中没有触发)但是该文件永远不会出现在上传目录中(在同一台机器上).

没有任何类型的控制台错误,我将上传目录权限设置为777以排除这种情况.

我发现的东西已经关闭……首先,在IE9中上传的文件从未触发我在uploadPhoto函数中放置的日志消息,因此路线似乎甚至没有击中(在现代浏览器中上传的思想文件会触发这些日志消息).此外,在上载后,在开发人员工具的“网络”面板中,“类型”的值不应为text / html,如下所示.

(以下映射到：URL,方法,结果,类型,已接收)：

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

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

所以我解决了这个问题罪魁祸首是我自己的代码(自然……叹息),这是有点：

if(params.file.mime !== 'image/png' && params.file.mime !== 'image/jpeg' && params.file.mime !== 'image/gif') {
    callbacks.uploadFailure('Wrong file type');
    return;
}

由于该指令使用flash进行后备上传(对于旧的,糟糕的浏览器,如IE< = 9),上传的mime类型实际上是application / octet-stream ...而不是上面检查的图像mime类型之一码.因此,将mime类型添加到我的检查允许通过闪存上载图像(因此,IE <= 9). 另外,我没有在我的日志中正确使用该错误消息“错误的文件类型”.我有：

callbacks.uploadFailure = function(err){
    res.json(400, 'Error uploading image.');
};

正如您所看到的,错误未被使用,以便在记录错误时消除特定的,信息性的错误消息,并且我只获得相对通用的“错误上载图像”.