我试图在不使用 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 的响应，它会提供有关请求失败原因的更多信息。在这种情况下，我希望它是 return cloud_name is disabled。当通过导致错误的 Cloudinary 交付 URL 请求资源时，也会出现此 header。例如。 https://res.cloudinary.com/demo/image/upload/ww_350/sample.jpg 会 return 一个 X-Cld-Error header 包含 Invalid transformation parameter - ww.
关于下一点，您使用的上传 API 端点不包含您的云名称。应该是https://api.cloudinary.com/v1_1/<cloud name>/image/upload
Client-side 上传（即在没有身份验证签名的情况下执行的上传）需要在您的帐户中设置未签名的上传预设，并与 file 一起作为两个强制参数。上传预设提供了一种定义上传参数的方法，这些参数通常允许在使用签名时直接在上传调用中设置。当不使用签名时，许多参数无法指定，如果需要，应在上传预设中配置。您可以在文档的这一部分找到更多相关信息，包括如何创建上传预设：https://cloudinary.com/documentation/upload_images#unsigned_upload

Answer 2

您犯了一个小错误，您没有在 post 请求中添加 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
  })

Note: The following method is uploading the using unsigned way so when you try to download image its url will be started as "http" not "https"

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

I am trying to upload an image using Cloudinary post API without using Cloudinary SDK

file-upload

cloudinary

angular