2014-10-17 3 views
8

Der folgende Code für Textur-Upload funktionierte in Angularjs 1.2.26 aber funktioniert nicht mehr, wenn ich meine Webanwendung auf 1.3.0 aktualisiere.'Unerwartete Token' in AJAX Upload von Multipart/Formulardaten in angular.js 1.3.0

HTML-Code

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

fileModel Richtlinie

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); 
      }); 

     } 
    }; 
} ]); 

Upload-Funktion - In 1.2.26 "multipart/form-data" als Content-Type Auswahl nicht funktionieren würde. Aber mit "undefined" als Content-Type eckig würde eine Art Magie wirken, die es zum Funktionieren bringen würde.

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 
     }); 
} 

ERROR:

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) 

Wer weiß, wie diese Arbeit in der neuen Version zu bekommen?

UPDATE

Ich habe das Problem ein wenig verengt. Es funktioniert nicht mit 1.3.0-rc.5, aber mit der vorherigen Version (rc.4) funktioniert es. Also versuche ich gerade herauszufinden, welche Änderungen zu meinem Problem führen. Hier ist die changelog.

Antwort

14

Das Problem war in der Antwortheader meiner Texture Upload-Anfrage auf der Serverseite. Für meine Anwendung Bau verwendete ich Spring MVC und hatte eine Anfrage Abbildung ähnlich, aber ohne die produces Spezifikation:

@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; 
} 

Also, ohne text/plain als Content-Type Angabe Spring verwendet automatisch application/json als Content-Type. Und dies verursacht, dass angular.js JSON.parse seit 1.3.0-rc.5 (change) aufruft. Mein Textur-Upload gibt eine URL zurück, die auf den Ort verweist, an dem das Bild geliefert wird. Da dies ein einfacher String ist, führte dies zu der beschriebenen Fehlermeldung. Vergessen Sie also nicht, in Ihren Serverantworten korrekte Inhaltstypen anzugeben :-)

+0

+1. Ich hatte excatly das Szenario (Datei-Upload-Rückkehr-URL) aber mit Jersey statt Feder MVC. Die gleiche Lösung funktioniert, ich annotate meine Ressource mit dem Trikot Äquivalent: '@Produces (TEXT_PLAIN)'. Du hast mir viel Zeit gespart. – gontard

+1

Froh, das zu hören! Zuerst dachte ich, es hätte mit dem Upload selbst zu tun, aber es stellte sich heraus, dass es ein Problem mit der Antwort war. – Jonas

+0

Beachten Sie, dass das Problem auftritt, wenn ich von eckigen 1.2 auf 1.3 aktualisiere. – gontard

Verwandte Themen