uploadcare 在 reactjs 应用程序中未定义

Question

我正在尝试使用 uploadcare 让我的 reactjs 应用程序存储图像。但我无法让它发挥作用。我已按照文档进行操作，但出现错误 "Uncaught TypeError: Cannot read property 'tabs' of undefined at 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

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

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

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

您可能使用 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)
  })
})

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

uploadcare 在 reactjs 应用程序中未定义

uploadcare is undefined in reactjs app

javascript

image

reactjs

uploadcare