如何让 Cloudinary 上传小部件工作？答案

【问题标题】：How to get the Cloudinary upload widget to work?如何让 Cloudinary 上传小部件工作？
【发布时间】：2019-10-19 16:15:03
【问题描述】：

此时我要做的就是让快速示例工作，如下所示 - https://cloudinary.com/documentation/upload_widget

这是我的代码 -

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
  </head>
  <body>


    <button id="upload_widget" class="cloudinary-button">Upload files</button>


<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

  <script type="text/javascript">  
    var myWidget = cloudinary.createUploadWidget({
      cloudName: 'cloudname', 
      uploadPreset: 'uploadPreset'}, (error, result) => { 
        if (!error && result && result.event === "success") { 
          console.log('Done! Here is the image info: ', result.info); 
        }
      }
    )

    document.getElementById("upload_widget").addEventListener("click", function(){
        myWidget.open();
      }, false);

  </script>

  </body>
</html>

当我点击“上传文件”按钮时，上传小部件的灰色框确实出现了，但我在里面看到的只是一个加载图标。

【问题讨论】：

标签： javascript cloudinary

【解决方案1】：

您的代码在本地和Codepen 上对我来说运行良好，无需对代码进行任何更改。我什至使用它上传了两张图片，您应该检查它们是否出现在您的 Cloudinary 帐户中。别担心，它们很干净。

由于我无法检查图像是否已上传到您的帐户，因此我创建了自己的 Cloudinary 帐户并验证该小部件确实可以正常工作。我只是通过更改为我的 cloudName 和预设来检查它。

这是Codepen Link

您的代码在下面，因为 Codepen 链接需要随附代码。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
  </head>
  <body>


    <button id="upload_widget" class="cloudinary-button">Upload files</button>


<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

  <script type="text/javascript">  
    var myWidget = cloudinary.createUploadWidget({
      cloudName: 'dw62s0tlm', 
      uploadPreset: 'rossm67'}, (error, result) => { 
        if (!error && result && result.event === "success") { 
          console.log('Done! Here is the image info: ', result.info); 
        }
      }
    )

    document.getElementById("upload_widget").addEventListener("click", function(){
        myWidget.open();
      }, false);

  </script>

  </body>
</html>

【讨论】：

【解决方案2】：

这是来自他们的支持（有效）-

发生这种情况的最常见原因是，如果包含小部件代码的 HTML 文件是通过 file:// 协议直接在浏览器中打开的。为了使其正常工作，应通过 Web 服务器通过 HTTP 从您的本地主机中打开该文件。

例如，如果您的系统安装了 Python，您可以在与您的文件相同的目录中快速运行一个简单的 HTTP 服务器，从而使其可访问。

例如在 Python 3 中：

python3 -m http.server

Python 2.7：

python -m SimpleHTTPServer

然后导航到http://localhost:8000/index.html 将运行代码并允许您启动小部件。

【讨论】：