在 React 中使用 Cloudinary 小部件

Posted 2023-03-25

【中文标题】在 React 中使用 Cloudinary 小部件

【英文标题】：Cloudinary widget use in React

【发布时间】：2018-04-27 12:39:39

【问题描述】：

我是 React 新手。我正在寻找一种将照片上传到 Cloudinary 的好方法。我看到了 Cloudinary 小部件，但我无法在 React 应用程序中实现它，如下所述： https://cloudinary.com/blog/how_to_build_an_image_library_with_react_cloudinary#uploading_images

我将脚本标签放在 index.html 正文中：

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

然后尝试在组件中使用：

class Landing extends Component 
  uploadWidget() 
    cloudinary.openUploadWidget(
       cloud_name: 'minetoo', upload_preset: 'mine', tags: ['xmas'] ,
      function(error, result) 
        console.log(result);
      
    );
  
...

但我得到了错误： 'cloudinary' 没有定义

如果重要的话，我的应用程序的样板文件是使用 create-react-app 生成的。

【参考方案1】：

正如here 和here 指出的那样，这是非常正常的。您需要从window 对象访问cloudinary 对象：

window.cloudinary.openUploadWidget(...)

【讨论】：

感谢 Chris，让我免于调试这个问题

【参考方案2】：

你可以将React Cloudinary Uploader 用于 Rect，这是目前在 React 中处理 Cloudinary 的最佳解决方案。