3 
$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 イメージを cloudinary アカウントにアップロードしようとしています。署名、API キー、アップロード URL、canvasImage が正しいかどうかは確認済みです。ただし、リクエストが送信されるたびに、

応答でエラーが発生します:

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

リクエストのペイロードを確認すると、ファイル パラメータが渡されていることがわかります。

canvasImage は base64 jpg です。種類の - data:image/jpeg;base64,/9j/4AAQSkZJRgABA.

cloudinary のドキュメントには、この種のものは見つかりません。

4

1 に答える 1

1

まず、FormData オブジェクトを調べます。マルチパート フォーム データをアップロードする場合は、これを使用する必要があります。

基本的に、FormData オブジェクトを使用すると、ファイル、BLOB、および文字列を追加できます (これら 3 つ以外のものを添付すると、文字列化されます)。append ie:

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

等々..

次。

マルチパート フォーム データではなく、コンテンツ タイプを undefined に設定します。これは直感的ではないように思えますが、ブラウザが自動的に適切な境界を設定し、コンテンツ タイプを自動的に multipart/formdata に戻します。

さらに、angular.identity に設定された config に transformRequest を追加します。ブラウザーはフォーム データをシリアル化しようとするため、transformRequest を angular.identity に設定して、シリアル化を停止する必要があります。

全体的な $http リクエストは次のようになります。

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

また、FormData オブジェクトをコンソール化すると (console.log(newForm)) 表示されるのは FormData {append: function} だけなので、FormData を扱うのは難しいことに注意してください。

于 2014-06-19T04:58:15.133 に答える