从React上传Cloudinary图片:包括Cloudinary未签名预设，但获取“必须在使用未签名上传时指定上传预设". [英] Cloudinary image upload from React: am including Cloudinary unsigned preset but get "Upload preset must be specified when using unsigned upload"

问题描述

我正在尝试根据以下代码笔示例构建一个简单的Cloudinary图片上传: https://codepen.io/team/Cloudinary/pen/QgpyOK -

I'm trying to construct a simple Cloudinary image upload based on this codepen example: https://codepen.io/team/Cloudinary/pen/QgpyOK --

我已经将其转换为可以与 fetch 一起使用，但是即使我已经进行了Cloudinary设置并创建了未签名的上传预设(我将其提供给标题)，我仍然遇到错误

I've converted it to work with fetch but even though I've gone to my Cloudinary settings and created an unsigned upload preset, which I'm providing to the headers, I'm still getting an error

POST https://api.cloudinary.com/v1_1/myproject/upload 400(错误请求)

显示错误消息

使用未签名的上传时必须指定上传预设

我正在使用的代码如下

_callCloudinaryApi(file, method = 'post') {

    const config = {
      method
    }

    const cloudName = "myproject" // fictional project name here
    const unsignedUploadPreset = "mypreset" // fictional preset name here
    const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;


    const fd = new FormData();
    fd.append('upload_preset', unsignedUploadPreset);
    fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
    fd.append('file', file);


    if (method !== 'get') {
      config.headers = {}
      config.headers['X-Requested-With'] = 'XMLHttpRequest'
    }

    return fetch(url, config)
      .then(res => res.json())
      .then(res => {
       console.log(res)
        return res;
      })
  }

任何人都可以帮助我确定可能是什么问题吗?非常感谢！

Can anyone help me to determine what the problem might be? Thanks very much!

推荐答案

您可以尝试以下操作-

    var data = new FormData();
    data.append('upload_preset', '<upload_preset>');
    data.append('file', file);
    data.append('cloud_name', '<cloud_name>');

    const config = {
        method: "POST",
        body: data 
    };

   var imgurl = "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload";

   fetch(imgurl, config)
    .then(responseData => {
              console.log(JSON.stringify(responseData, null, 4));
    })

这篇关于从React上传Cloudinary图片:包括Cloudinary未签名预设，但获取“必须在使用未签名上传时指定上传预设".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！