Question

这时我要做的就是使快速示例工作如下所示-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>

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

Answer 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>

Answer 2

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

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

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

例如在Python 3中：

django.middleware.csrf.CsrfViewMiddleware

Python 2.7：

python3 -m http.server

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

如何使Cloudinary上传小部件正常工作？

2 个答案: