Angularjs、文件上传和 IE9

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 application/octet-stream...不是上面检查的图像 mime 类型之一代码。因此，在我的检查中添加该 mime 类型允许通过 flash 上传图像（因此，IE

此外，我在日志中没有正确使用该错误消息“错误的文件类型”。我有：

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

如您所见，err 未使用，因此在记录错误时，特定的、信息丰富的错误消息消失了，我只得到相对通用的“上传图像错误”。