Question

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

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

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

Angularjs，文件上传和IE9

1 个答案: