'Mã thông báo không mong muốn' trong việc tải lên AJAX của nhiều dữ liệu/biểu mẫu trong angular.js 1.3.0

Question

Mã sau đây để tải lên kết cấu đang hoạt động ở angularjs 1.2.26 nhưng ngừng hoạt động khi tôi nâng cấp ứng dụng web lên 1.3.0.

Mã HTML

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

fileModel Chỉ

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

     } 
    }; 
} ]); 

Tải lên Chức năng - Trong 1.2.26 chọn "multipart/form-data" như Content-Type sẽ không hoạt động. Nhưng với "không xác định" là góc nội dung loại sẽ làm một số loại ma thuật mà có thể làm cho nó hoạt động.

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

LỖI:

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) 

Có ai biết làm thế nào để làm việc này trong phiên bản mới?

CẬP NHẬT

tôi đã thu hẹp xuống vấn đề một chút. Nó không hoạt động với 1.3.0-rc.5, nhưng với phiên bản trước (rc.4) nó hoạt động. Vì vậy, tôi hiện đang cố gắng tìm ra những thay đổi nào dẫn đến vấn đề của tôi. Đây là changelog.

Answer 1

Sự cố nằm trong tiêu đề phản hồi của yêu cầu tải lên kết cấu của tôi ở phía máy chủ. Đối với việc xây dựng ứng dụng của tôi, tôi sử dụng Spring MVC và có một ánh xạ yêu cầu như vậy, nhưng nếu không có sự produces đặc điểm kỹ thuật:

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

Vì vậy, mà không chỉ định text/plain như Content-Type, Spring tự động sử dụng application/json như Content-Type. Và điều này làm cho angular.js gọi JSON.parse từ 1.3.0-rc.5 (change). Tải lên kết cấu của tôi trả về một URL trỏ đến vị trí nơi hình ảnh được phân phát. Bởi vì đây là một String đơn giản, nó dẫn đến thông báo lỗi được mô tả. Vì vậy, đừng quên chỉ định đúng loại nội dung trong thư trả lời của máy chủ của bạn :-)