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 key、上传url和canvasImage是否正确。然而，无论何时发送请求，

我得到一个错误的回应：

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

在检查请求有效负载时，我可以看到正在传递的文件参数。

canvasImage 是base64 jpg。排序 - 数据：图像/jpeg；base64，/9j/4AAQSkZJRgABA。

在 cloudinary 文档中找不到任何此类内容。

4

1 回答 1

1

首先，查看 FormData 对象。如果您要上传多部分表单数据，您将需要使用它。

基本上，FormData 对象允许您使用它所具有的唯一函数追加文件、blob 和字符串（如果您附加不属于这三者的内容，它将对其进行字符串化），即追加：

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 添加到 angular.identity 的配置中。浏览器将尝试序列化您的表单数据，因此您需要通过将 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 很难与您打交道，因为如果您控制台 FormData 对象，即（console.log（newForm）），它将显示的只是： FormData {append：function}

于 2014-06-19T04:58:15.133 回答