Cloudinary widget 在 React 中的使用

Question

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

我把脚本标签放在index.html body:

<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 生成的。

Answer 1

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

window.cloudinary.openUploadWidget(...)

Answer 2

Rect可以使用React Cloudinary Uploader，这是目前在React中处理Cloudinary的最佳方案。

Cloudinary widget 在 React 中的使用

Cloudinary widget use in React

cloudinary

reactjs