从 React 上传 Cloudinary 图像：我包含 Cloudinary 未签名预设，但得到“使用未签名上传时必须指定上传预设”

我正在尝试基于此 codepen 示例构建一个简单的 Cloudinary 图像上传：https://codepen.io/team/Cloudinary/pen/QgpyOK https://codepen.io/team/Cloudinary/pen/QgpyOK --

我已经将其转换为可以使用fetch但即使我已经进入 Cloudinary 设置并创建了一个未签名的上传预设（我将其提供给标头），我仍然收到错误

POST https://api.cloudinary.com/v1_1/myproject/upload 400 (Bad Request)

与错误消息

Upload preset must be specified when using unsigned upload

我正在使用的代码如下

_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;
      })
  }

谁能帮我确定问题可能是什么？非常感谢！

您可以尝试以下操作 -

    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));
    })