我正在尝试使用 Cloudinary post API 上传图像而不使用 Cloudinary SDK

Posted 2023-03-25

【中文标题】我正在尝试使用 Cloudinary post API 上传图像而不使用 Cloudinary SDK

【英文标题】：I am trying to upload an image using Cloudinary post API without using Cloudinary SDK

【发布时间】：2020-02-16 06:21:02

【问题描述】：

我是 cloudinary 和 Angular 的新手。我一直在寻找一种在不使用 SDK 作为 cloudinary 的情况下将图像上传到 cloudinary 的方法，让我们可以选择使用 post API 上传图像，我尝试了以下方法但没有成功。

uploadImage(event) 
var that = this;
this.create_blob(event.srcElement.files[0], function (blob_string) 
  that.http.post('https://api.cloudinary.com/v1_1/image/upload/',  file: blob_string).subscribe(res => 
    // url of upload file
  )
);

 create_blob(file, callback) 
var reader = new FileReader();
reader.onload = function ()  callback(reader.result) ;
reader.readAsDataURL(file);

我在控制台中收到以下错误。

HttpErrorResponse headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "https://api.cloudinary.com/v1_1/image/upload/", ok: false, …

【参考方案1】：

根据您提供的代码，我可以看到一些内容：

您可以检查响应标头并查找名为 X-Cld-Error 的标头，该标头将提供有关请求失败原因的更多信息。在这种情况下，我希望它返回cloud_name is disabled。当通过导致错误的 Cloudinary 交付 URL 请求资源时，也会出现此标头。例如。 https://res.cloudinary.com/demo/image/upload/ww_350/sample.jpg 将返回一个包含 Invalid transformation parameter - ww 的 X-Cld-Error 标头。

与下一点相关的是，您使用的上传 API 端点不包括您的云名称。应该是https://api.cloudinary.com/v1_1/<cloud name>/image/upload

客户端上传（即在没有身份验证签名的情况下执行的上传）需要在您的帐户中设置未签名的上传预设，并与 file 一起作为两个强制参数提供。上传预设提供了一种方法来定义通常允许在使用签名时直接在上传调用中设置的上传参数。不使用签名时，无法指定许多这些参数，如果需要，应在上传预设中进行配置。您可以在文档的这一部分了解更多信息，包括如何创建上传预设：https://cloudinary.com/documentation/upload_images#unsigned_upload

【参考方案2】：

您犯了一个小错误，错过了在您的帖子请求中添加 cloud_name。您可以通过访问 Cloudinary 仪表板找到您的 cloud_name。正确的代码如下

    uploadImage(event) 
    var that = this;
    this.create_blob(event.srcElement.files[0], function (blob_string) 
    that.http.post('https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/image/upload/',  file:  blob_string).subscribe(res => 
    // url of upload file
  )

注意：以下方法是使用未签名的方式上传，因此当您尝试下载图片时，其 url 将以“http”而不是“https”开头