Cloudinary Base64 Загрузка изображения в angularjs

Question

$http({method: 'POST', 
    url: $rootScope.CLOUDINARY_CONFIG.upload_url, 
    data : { 
     file : canvasImage, 
     resource_type : 'image', 
     format: "jpg", 
     timestamp : 1375363550, 
     api_key : $rootScope.CLOUDINARY_CONFIG.api_key, 
     signature : signature, 
     public_id : scope.model.public_id 
    }, 
    headers : {"X-Requested-With": "XMLHttpRequest", "Content-Type" : "multipart/formData"} 

    }).success(function(data, status, headers, config) { 
      console.log("success"); 
    }).error(function(data, status, headers, config) { 
      console.log("fail"); 
    }); 

Я пытаюсь загрузить изображение base64 в облачную учетную запись. Я уже проверял правильность подписи, ключа api, URL-адрес загрузки и canvasImage. Но всякий раз, когда посылается запрос,

Я получаю сообщение об ошибке в ответ:

{"error":{"message":"Missing required parameter - file"}} 

При проверке полезной нагрузки запроса я могу увидеть параметр файла передается.

CanvasImage - base64 jpg. сортировки - данные: image/jpeg; base64,/9j/4AAQSkZJRgABA.

Не удается найти что-либо подобное в облачной документации.

Answer 1

Во-первых, посмотрите на объект FormData. Вы захотите использовать это, если вы загружаете многоформатные данные формы.

В основном, объект FormData позволяет добавлять файлы, сгустки и строки (если вы приложите что-нибудь не из этих трех, это будет stringify его), используя только функцию, которую она имеет, добавить именно:

var newForm = new FormData(); 

newForm.append('fileName', file); 
newForm.append('api_key', $rootScope.CLOUDINARY_CONFIG.api_key); 
newForm.append('signature', signature); 
newForm.append(public_id, scope.model.public_id); 

и так далее ..

Далее.

Задайте свой тип контента неопределенным, а не многоформатными данными формы. Это кажется неинтуитивным, однако, происходит то, что браузер автоматически установит для вас правильную границу и автоматически вернет тип содержимого в multipart/formdata.

Кроме того, добавьте параметр transformRequest в конфигурацию, заданную как угловое. Браузер попытается сериализовать ваши данные формы, поэтому вам нужно прекратить это, установив transformRequest на угловое.

запрос $ HTTP В целом должен выглядеть следующим образом:

$http.post(url, newForm, { 
    transformRequest: angular.identity, 
    headers: {'Content-Type': undefined} 
}) 
.success(function(data){ 
    // success 
}) 
.error(function(err){ 
    // log error 
}) 

Также отметим, что FormData сложно иметь дело с вами, потому что если вы утешать ваш FormData объект, то есть (console.log (NEWFORM)) все он покажет: FormData {append: function}