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

Posted 2023-03-25

【中文标题】从 React 上传 Cloudinary 图像：我包括 Cloudinary 未签名预设，但得到“使用未签名上传时必须指定上传预设”

【英文标题】：Cloudinary image upload from React: am including Cloudinary unsigned preset but get "Upload preset must be specified when using unsigned upload"

【发布时间】：2019-01-09 00:16:59

【问题描述】：

我正在尝试基于此 codepen 示例构建一个简单的 Cloudinary 图像上传：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;
      )
  

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

【参考方案1】：

您可以尝试以下方法-

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

【讨论】：

谢谢，但这也不起作用 - 仍然得到相同的 400 错误。我什至创建了一个新的预设但没有骰子。我已经进入我的 Cloudinary 设置，有 Unsigned uploading enabled 和 unsigned 预设，我正在使用它们。我尝试了一个在线示例，您可以在其中输入预设，但它也不起作用。在上传之前是否有某种等待期？我今天创建了帐户。

【参考方案2】：

我也有这个错误，去https://cloudinary.com/console/settings/upload，你确实有一个Upload presets，请确保有一个Signing Mode转为Unsigned。

就安全性而言，这可能不是最好的做法（我猜更好的方法是通过身份验证）。

顺便说一句，我在 Devtools 网络选项卡中找到了有关 400 错误的线索。

【参考方案3】：

我遇到了同样的问题，希望这个解决方案可以帮助其他人

uploadFile = async (e) => 
    const files = e.target.files;
    const data = new FormData();
    data.append('file', files[0]);
    data.append('upload_preset', 'PRESET_NAME');
    const res = await fetch('https://api.cloudinary.com/v1_1/YOUR_ACOUNT_USER/image/upload', 
      method: 'POST',
      body: data
    );
    const file = await res.json();
    console.log(file);
    this.setState(
      image: file.secure_url
    )