Я пытаюсь загрузить изображение с помощью Cloudinary Post API без использования Cloudinary SDK?

Question

Я новичок в облачной и угловой. Я искал способ загрузить изображение в облачный формат без использования SDK, так как облачный формат предоставил нам возможность загрузить изображение с помощью 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

Есть несколько вещей, которые я вижу на основе предоставленного вами кода:

• Вы можете проверить заголовки ответа и найти тот, который называется X-Cld-Error, который обеспечитдополнительная информация о том, почему запрос не прошел. В этом случае я ожидаю, что он вернет cloud_name is disabled. Этот заголовок также присутствует при запросе ресурсов через URL-адреса облачной доставки, что приводит к ошибке. Например, https://res.cloudinary.com/demo/image/upload/ww_350/sample.jpg вернул бы заголовок X-Cld-Error, содержащий Invalid transformation parameter - ww.

• Что относится к следующему пункту, конечная точка API загрузки, которую вы используете, не включаетваше облачное имя. Это должно быть https://api.cloudinary.com/v1_1/<cloud name>/image/upload

• Для загрузки на стороне клиента (т. Е. Для тех, которые выполняются без аутентификационной подписи) требуется, чтобы в вашей учетной записи была настроена предустановка загрузки без подписи и предоставлена ​​вместе с file как два обязательных параметра. Предустановки выгрузки предоставляют способ определения параметров выгрузки, которые обычно разрешается устанавливать непосредственно в вызове выгрузки при использовании подписи. Когда не используется подпись, многие из этих параметров не могут быть указаны, и, если требуется, должны быть настроены в предустановке загрузки. Вы можете узнать больше об этом, в том числе о том, как можно создать предустановку загрузки в этом разделе документации: https://cloudinary.com/documentation/upload_images#unsigned_upload

Answer 2

Вы делаете небольшую ошибку, которую вы пропустили, добавив cloud_name в свой пост-запрос. Вы можете найти ваше 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
  })