在reactjs应用中未定义uploadcare

Question

我正尝试在我的reactjs应用程序中使用uploadcare来存储图像。但是我不能让它工作。我已经按照文档操作了，但是我得到了一个错误“未捕获标签:无法读取Object.u.openDialog (uploadcare.min.js:24)上未定义标签的属性‘TypeError’”。虽然我已经安装了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>
    )
  }
}

我被困在这上面很长一段时间了。请帮帮我！

Answer 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)
  })
})

今天我将发布新版本的widget，修复了这个bug。您可以更新和删除临时解决方案。

Answer 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);
              });
            });

Answer 3

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

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