在 reactjs 应用程序中未定义 uploadcare答案

【问题标题】：uploadcare is undefined in reactjs app在 reactjs 应用程序中未定义 uploadcare
【发布时间】：2017-07-02 23:53:04
【问题描述】：

我正在尝试为我的 reactjs 应用程序使用 uploadcare 来存储图像。但我无法让它发挥作用。我已按照文档进行操作，但收到错误消息“未捕获的 TypeError：无法读取 Object.u.openDialog (uploadcare.min.js:24) 处未定义的属性 'tabs'”。虽然我已经 npm 安装了 uploadcare-widget 并将其导入到我的文件中，但它不起作用。以下是相关代码：

首先我在 index.html 中添加脚本标签，如下所示：

<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
</script>

然后在我的组件中我这样做：

import uploadcare  from 'uploadcare-widget';

class ImageComponent extends React.Component {
  componentDidMount() {
    uploadcare.start({publicKey: 'demopublickey'})
  }

  addImage(e) {
    uploadcare.openDialog(null, {
      imagesOnly: true,
      multiple: false,
    }).done((file) => {
      file.promise().done((fileInfo) => {
        console.log(fileInfo.cdn)
      })
    })
  }

  render () {
    const imageInput = (
      <div className='image-box'>
        <Button onClick={this.addImage}>Add Image</Button>
      </div>
    )

    return (
      <div>
        { this.state.imgSrc && this.renderImageView() }
        { !this.state.imgSrc && imageInput }
      </div>
    )
  }
}

我被困在这个问题上很长时间了。请帮忙！

【问题讨论】：

似乎是你想要的：github.com/uploadcare/uploadcare-widget-react-demo

标签： javascript image reactjs uploadcare

【解决方案1】：

您可能使用3.0.0 版本。在此版本中，openDialog 存在错误。报告于the issue on github。

临时解决方案：设置第二个参数（tab）并为第三个参数（settings）添加tabs属性，见docs，

uploadcare.openDialog(null, 'file', {
  tabs: 'all',
  imagesOnly: true,
  multiple: false,
}).done((file) => {
  file.promise().done((fileInfo) => {
    console.log(fileInfo.cdn)
  })
})

今天我将发布新版本的小部件以修复此错误。您可以更新和删除临时解决方案。

【讨论】：

【解决方案2】：

您缺少第二个参数，如文档中所述： https://uploadcare.com/documentation/javascript_api/#dialog

uploadcare.openDialog(null, 'file', {
              publicKey: 'your_key',
              imagesOnly: true,
              tabs: ['file', 'url'],
            }).done((file) => {
              file.done((fileInfo) => {
                console.log('UPLOADED: ' + fileInfo.cdnUrl);
              });
            });

【讨论】：

【解决方案3】：

如果我信任这个存储库https://github.com/uploadcare/uploadcare-widget-react-demo，您应该将tabs:"all" 放在启动函数中。

uploadcare.start({
  publicKey: "demopublickey",
  tabs: "all"
});

【讨论】：