angularjs - angular.js 1.3.0 中 multipart/form-data 的 AJAX 上传中出现“意外 token ”

Question

以下用于纹理上传的代码在 angularjs 1.2.26 中工作，但当我将 Web 应用程序升级到 1.3.0 时停止工作。

HTML 代码

<input file-model="file" name="file" type="file">

文件模型指令

app.directive('fileModel', [ '$parse', function($parse) {
    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function() {
                scope.$apply(function() {
                    modelSetter(scope, element[0].files[0]);
                });
            });

            scope.$on("reset", function() {
                element.val(null);
            });

        }
    };
} ]);

上传功能 - 在 1.2.26 中，选择“multipart/form-data”作为 Content-Type 将不起作用。但是，使用“未定义”作为内容类型， Angular 会产生某种魔力，使其发挥作用。

var upload = function(textureUploadUrl) {
        var formData = new FormData();
        formData.append('name', $scope.name);
        formData.append('file', $scope.file);

        $http.post(textureUploadUrl, formData, {
            transformRequest : angular.identity,
            headers : {
                'Content-Type' : undefined
            }
        }).success(function(uploadedTexture) {
            console.log(uploadedTexture);

            // further processing of uploadedTexture
        });
}

错误:

SyntaxError: Unexpected token h
    at Object.parse (native)
    at fromJson (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:1104:14)
    at defaultHttpResponseTransform (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:8572:18)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:8517:12
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:335:20)
    at transformData (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:8516:3)
    at transformResponse (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:9224:23)
    at processQueue (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:12914:27)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:12930:27
    at Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js:14123:28) 

有人知道如何在新版本中使其正常工作吗？

更新

我已经缩小了问题的范围。它不适用于 1.3.0-rc.5，但适用于以前的版本 (rc.4)。因此，我目前正在尝试找出哪些变化导致了我的问题。这是changelog .

Answer 1

问题出在服务器端纹理上传请求的响应 header 中。为了构建我的应用程序，我使用了 Spring MVC 并具有类似的请求映射，但没有 products 规范:

@RequestMapping(value = "/uploadUrl", method = RequestMethod.POST, produces = "text/plain; charset=utf-8")
@ResponseBody
public String textureUploadPOST(HttpServletRequest req) {
    // upload texture and create serveUrl for the texture
    return serveUrl;
}

因此，在不指定 text/plain 作为 Content-Type 的情况下，Spring 会自动使用 application/json 作为 Content-Type。这会导致 angular.js 从 1.3.0-rc.5 ( change ) 开始调用 JSON.parse。我的纹理上传返回一个指向提供图像的位置的 URL。因为这是一个纯字符串，所以它导致了所描述的错误消息。因此，不要忘记在服务器响应中指定正确的内容类型:-)