javascript - 如何在 React 中实现 Cloudinary 上传小部件?
问题描述
我正在尝试在我的 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>
解决方案
首先,让我们了解这个问题。Cloudinary 上传小部件是在组件的渲染函数中定义的,当该组件被渲染时,它将打开上传小部件,因为它是使用openUploadWidget
. 其次,小部件仅在 render 函数的范围内定义,不能在其外部访问,因此 error 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/
推荐阅读
- typescript - 在 Typescript 中优雅地将两种类型组合成一个界面
- python-2.7 - 找不到 pocketsphinx(缺少:pocketsphinx_DIR)
- machine-learning - Word2Vec:单词不在词汇表中,即使它在语料库中
- python - Python中单元测试的最佳实践——多个函数适用于同一个对象
- python - 线性回归负载模型未按预期进行预测
- python - 根据现有的制作多个列
- html - 拉拉维尔 5.8。如何上传文件?
- php - 如何从字符串转换为 int 并将它们逐个字符拆分到另一个数组中
- nlp - 如何从斯坦福 NLP 工具中获得增强的依赖解析?
- android - 如何以编程方式从 recyclerview 中删除项目?