如何在 React 中实现 Cloudinary 上传小部件？

Posted 2023-03-25

【中文标题】如何在 React 中实现 Cloudinary 上传小部件？

【英文标题】：How to Implement Cloudinary Upload Widget in React?

【发布时间】：2019-08-13 00:12:48

【问题描述】：

我正在尝试在我的 React 应用程序中使用 Cloudinary 上传小部件，但我遇到了问题。 运行项目时，Upload Widget 立即出现，但关闭并再次打开时，应用崩溃并显示以下消息：

widget.open() 不是函数

注意： 上传正常

import React,  Component  from 'react';
import './App.css';

class App extends Component 
  showWidget = (widget) => 
    widget.open();
  

  checkUploadResult = (resultEvent) => 
    if(resultEvent.event === 'success')
      console.log(resultEvent)
    
  
  render() 
      let widget = window.cloudinary.openUploadWidget(
      cloudName: "*********",
      uploadPreset: "tryingfirsttime",
      (error, result) => this.checkUploadResult(result));

    return (
      <div className="App">
        <button onClick=this.showWidget> Upload file</button>
      </div>
    );
  


export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

enter image description here

enter image description here

【参考方案1】：

首先，让我们了解这个问题。 Cloudinary 上传小部件在组件的渲染函数中定义，当该组件被渲染时，它将打开上传小部件，因为它是使用openUploadWidget 的功能定义的。其次，小部件仅在渲染函数的范围内定义，不能在其外部访问，因此出现错误widget.open() is not a function。

为了解决这些问题，我首先将小部件定义为局部变量或状态的一部分。这是通过将构造函数作为组件的一部分来完成的：

constructor(props) 
   super(props)

   // Defined in state
   this.state =  . . . 

   // Defined as local variable
   this.widget = myLocalVariable

接下来要做的是在创建 Cloudinary 上传小部件的实例时，使用 createUploadWidget 而不是 openUploadWidget，以允许控制何时打开小部件。

constructor(props) 
   super(props)
   // Defined in state
   this.state = 
      widget: cloudinary.createUploadWidget(
         cloudName: 'my_cloud_name', 
         uploadPreset: 'my_preset', 
         (error, result) =>  
            if (!error && result && result.event === "success")  
               console.log('Done! Here is the image info: ', result.info); 
            
         
      )
    
    // Defined as local variable
    this.widget = cloudinary.createUploadWidget(
       cloudName: 'my_cloud_name', 
       uploadPreset: 'my_preset', (error, result) =>  
         if (!error && result && result.event === "success")  
           console.log('Done! Here is the image info: ', result.info); 
         
       
    )
 

最后，showWidget 点击事件不需要小部件作为参数传递（因为它是在组件中本地定义的），也可以使用this 关键字来引用。请注意，您需要包含关键字 this 来引用当前组件。

showWidget = () => 
  this.widget.open();

我已经包含了一个显示最终结果的 JSFiddle： https://jsfiddle.net/danielmendoza/fve1kL53/

【参考方案2】：

我会补充一点，如果您尝试使用 URL 结果设置状态，您可能需要重写 showWidget 函数以防止事件默认值。否则，您将收到无法在未安装的组件中使用 setState() 的错误。

showWidget = (e) => 
  e.preventDefault();
  this.widget.open();