Question

我正在尝试在我的React App中使用Cloudinary Upload Widget，但是我遇到了问题。在运行项目时，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

Answer 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 click事件不需要将小部件作为参数传递（因为它是在组件中本地定义的），并且也可以使用this关键字进行引用。请注意，您需要包含关键字this来引用当前组件。

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

我包括了一个JSFiddle来显示最终结果： https://jsfiddle.net/danielmendoza/fve1kL53/

Answer 2

我还要补充一点，如果您尝试使用URL结果设置状态，则可能需要重写showWidget函数以防止事件默认。否则，您将收到一个错误，指出您无法在已卸载的组件中使用setState（）。

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

如何在React中实现Cloudinary Upload Widget？

2 个答案: