Cloudinary openUploadWidget 在我的 React 应用程序中抛出错误

Question

我似乎没有做正确的事情，但我不知道是什么。我需要在我的网络应用程序中打开 cloudinary 上传小部件，但它一直抛出此错误；类型错误：__WEBPACK_IMPORTED_MODULE_6_cloudinary___default.a.openUploadWidget 不是函数。

我正在使用 React，这就是我使用它的方式...

    load = (e) => {
    e.preventDefault();
    cloudinary.openUploadWidget({ cloud_name: 'classvideo', upload_preset: 'classVideo' },
      function (error, result) { console.log(result) });
  }

这就是我尝试通过单击渲染方法中的按钮来渲染它的方式...

   <div>
      <button onClick={this.load}>upload Image</button>
   </div>

这是我 html

中的脚本标签

  <script src="//widget.cloudinary.com/global/all.js" type="text/javascript" />
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

是不是我做错了什么？ webpack 与此有什么关系？请帮忙

Answer 1

尝试添加 window.cloudinary.openUploadWidget({..

Answer 2

cloudinary 如果您使用单独的脚本标签加载它，它将是一个全局对象。

如果您删除隐藏全局对象的导入，它将按预期工作。

// import cloudinary from 'cloudinary';

Answer 3

Rect可以使用React Cloudinary Uploader，此时在React中处理Cloudinary是一个很好的解决方案。

Answer 4

如果您在此 post 上着陆，但使用的是 Angular，请注意您必须：

在 angular.json 中包含脚本
引用 index.html 中的脚本
...然后在组件中声明cloudinary变量

请注意，我没有使用远程脚本参考，但已经下载了小部件源代码并将其包含在我的项目中。

Cloudinary openUploadWidget 在我的 React 应用程序中抛出错误

Cloudinary openUploadWidget throw error in my react app

cloudinary

reactjs