javascript - uploadcare 在 reactjs 应用程序中未定义

Question

我正在尝试使用 uploadcare为我的 reactjs 应用程序存储图像。但我无法让它发挥作用。我已按照文档进行操作，但出现错误“未捕获类型错误:无法读取 Object.u.openDialog (uploadcare.min.js:24) 处未定义的属性‘选项卡’”。虽然我已经 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)
  })
})

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