Cloudinary openUploadWidget在我的应用程序中引发错误

Question

我似乎做的不对，但是我不知道该怎么办。我需要在Web应用程序中打开cloudinary上载小部件，但它不断抛出此错误； TypeError：__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

如果您登陆这篇文章但使用的是 Angular，请注意您必须：

• 在 angular.json 中包含脚本

• 从 index.html 引用脚本

• ...然后在组件中声明cloudinary变量

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

Answer 4

您可以将React Cloudinary Uploader用于Rect，这是在React中处理Cloudinary的一个很好的解决方案。