uploadcare在reactjs應用程序中未定義

Question

我正在嘗試使用uploadcare來爲我的reactjs應用程序存儲圖像。但我無法使其工作。我已經按照文檔，但我得到一個錯誤「Uncaught TypeError：無法讀取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），並添加tabs財產的第三個參數（settings），看docs，

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

今天我要解除控件的新版本，這個bug的修復。您可以更新並刪除臨時解決方案。

Answer 2

如果我信任此存儲庫https://github.com/uploadcare/uploadcare-widget-react-demo，則應該在啓動函數中放入tabs:"all"。

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

Answer 3

你缺少第二個參數，如在這裏的文檔規定： 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); 
       }); 
      });