如何在React中实现Cloudinary Upload Widget？ [英] How to Implement Cloudinary Upload Widget in React?

问题描述

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

I'm trying to use the Cloudinary Upload Widget in my React App but i have a problem. When running the project, the Upload Widget appears immediately, but when closed and opened again, the app crashes and displays the following message:

widget.open（）不是函数

widget.open() is not a function

注意：
上传可以正常工作

Note: The upload works correctly

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> 

在此处输入图片描述

在此处输入图片描述

推荐答案

第一，让我们了解一下问题。 Cloudinary上载小部件在组件的渲染功能中定义，并且在渲染该组件时，由于使用 openUploadWidget 的功能进行定义，它将打开上载小部件。其次，该窗口小部件仅在render函数的范围内定义，无法在其外部访问，因此错误 widget.open（）不是函数。

First, let's understand the issue. The Cloudinary upload widget is defined in the render function of the component and when that component is rendered, it will open the upload widget since it's defined with the functionality of openUploadWidget. Secondly, the widget is defined only in the scope of the render function and not accessible outside of it, hence the error widget.open() is not a function.

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

To remedy these issues, I would first start by defining the widget either as a local variable or part of the state. This is done by including the constructor as part of your component:

constructor(props) {
   super(props)

   // Defined in state
   this.state = { . . . }

   // Defined as local variable
   this.widget = myLocalVariable
}

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

The next thing to do is when creating an instance of the Cloudinary upload widget, to use createUploadWidget and not openUploadWidget, to allow control of when to open the widget.

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来引用当前组件。

Lastly, the showWidget click event does not need the widget passed as an argument (since it's defined locally in the component) and can be referred too with the this keyword. Note that you'll need to include the keyword this to refer to the current component.

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

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

I have included a JSFiddle showing the end result: https://jsfiddle.net/danielmendoza/fve1kL53/

这篇关于如何在React中实现Cloudinary Upload Widget？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！