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

Posted 2023-03-25

【中文标题】Cloudinary openUploadWidget 在我的反应应用程序中抛出错误

【英文标题】：Cloudinary openUploadWidget throw error in my react app

【发布时间】：2019-01-16 02:11:12

【问题描述】：

我似乎做得不对，但我不知道是什么。我需要在我的网络应用程序中打开云上传小部件，它一直抛出这个错误；类型错误：__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 和这个有什么关系？ 请帮忙

【问题讨论】：

cloudinary 将是一个全局对象，如果您使用的是脚本标签。也许你也在写import cloudinary from 'cloudinary'之类的东西？如果是这种情况，请尝试删除该行。

谢谢，@Tholle 现在我明白我不需要 import 声明了。删除导入语句并添加“窗口”。 'cloudinary.openUploadWidget' 的背面完美运行。

【参考方案1】：

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

【参考方案2】：

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

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

// import cloudinary from 'cloudinary';

【参考方案3】：

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

【参考方案4】：

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

在 angular.json 中包含脚本

从 index.html 引用脚本

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

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