angular - 我正在尝试在不使用 Cloudinary SDK 的情况下使用 Cloudinary post API 上传图像

Question

我是 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, …}

Answer 1

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

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

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

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