2014-10-17 64 views
8

以下用於紋理上傳的代碼在angularjs 1.2.26中工作,但在我將Web應用程序升級到1.3.0時停止工作。angularJs 1.3.0中的multipart/form-data的AJAX上傳中的'Unexpected token''Unexpected token'1.3.0

HTML代碼

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

fileModel指令

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的」 爲內容類型是行不通的。但與「未定義」作爲內容類型角會做一些神奇的事情,使它的工作。

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) 

有誰知道如何在新版本中得到這個工作?

UPDATE

我已經縮小的問題一點點。它不適用於1.3.0-rc.5,但與以前的版本(rc.4)一起工作。所以,我正在試圖找出哪些更改會導致我的問題。這是changelog

回答

14

問題出在服務器端的紋理上傳請求的響應標題中。爲構建我的應用程序中使用Spring MVC和有一個這樣的請求映射,但沒有produces規格:

@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的內容類型,彈簧會自動使用application/json的內容類型。這導致angular.js自1.3.0-rc.5(change)調用JSON.parse。我的紋理上傳返回一個指向圖像所在位置的URL。因爲這是一個普通的字符串,它導致了所描述的錯誤信息。因此,請不要忘記在您的服務器響應中指定正確的內容類型:-)

+0

+1。我非常興奮的情景(文件上傳返回url),但與運動衫,而不是春季MVC。同樣的解決方案的工作原理,我註釋我的資源等效澤西:'@Produces(TEXT_PLAIN)'。你爲我節省了很多時間。 – gontard 2014-11-14 15:16:44

+1

很高興聽到!起初我認爲這與上傳本身有關,但事實證明這是響應的問題。 – Jonas 2014-11-14 15:47:16

+0

請注意,當我從角度1.2升級到1.3時出現問題。 – gontard 2014-11-14 15:56:35