从React上传Cloudinary图片:包括Cloudinary未签名预设,但获取“使用未签名上传时必须指定上传预设”

时间:2018-08-01 12:14:26

标签: javascript reactjs fetch-api cloudinary

我正在尝试根据以下代码笔示例构建一个简单的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;
      })
  }

有人可以帮助我确定问题所在吗?非常感谢!

3 个答案:

答案 0 :(得分:0)

您可以尝试以下操作-

$places = Places::with('locations.places')->get()->whereRaw( 'LOWER(`title`) like ?', $id );

答案 1 :(得分:0)

我也遇到此错误,转到https://cloudinary.com/console/settings/upload,您的确有Upload presets,请确保其中有一个Signing Mode变成了Unsigned的人。 / p>

就安全性而言,这也许不是最好的选择(我猜更好的方法是进行身份验证)。

我在Devtools网络标签中找到了有关400错误的线索。

答案 2 :(得分:0)

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

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