2

我正在尝试为我的 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>
    )
  }
}

我已经坚持了很长时间了。请帮忙！

4

3 回答 3

2

您可能使用该3.0.0版本。在这个版本中有一个错误openDialog。在 github 上的问题中报告。

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

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

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

于 2017-07-03T11:05:04.327 回答
1

您缺少第二个参数，如文档中所述： 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);
              });
            });
于 2017-07-03T05:59:02.353 回答
0

如果我信任此存储库https://github.com/uploadcare/uploadcare-widget-react-demo，您应该放入tabs:"all"启动功能。

uploadcare.start({
  publicKey: "demopublickey",
  tabs: "all"
});
于 2017-07-03T00:57:27.960 回答