时间戳

首页 > 解决方案 > 新上传javascript时自动更新图片

javascript - 新上传javascript时自动更新图片

问题描述

我希望能够更新在将新图像上传到数据库时看到的图像。我正在使用 Cloudinary，所以一旦我使用小部件上传到 Cloudinary，我就会得到一个唯一的 url，我可以得到，但我无法在页面上显示新的更新图像。这是我得到的：

    <div class="image"style="background: url('<%= ogImgUrl %>') center;
            width: 50%;
            height: 100%;
            display:block;background-size: 75%; background-repeat: no-repeat;
       border-radius: 8px 0 0 8px;">
 <button id="upload_widget" class="button">Upload Product Image</button>
    </div>
        
<form method="GET" action="/editProduct2">
    <!-- submit image -->

 <!-- submit image end -->
 <input type="hidden" name="url" id="url" value="<%= ogImgUrl %>" readonly>
     
      <button id="submitButton" type="submit">SUBMIT CHANGES</button>

</form>
        </div>
      </div>
    </div>
      
               

              <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  
             
              <script type="text/javascript">  
              var myWidget = cloudinary.createUploadWidget({
                cloudName: 'xxx', 
                uploadPreset: 'ld3l7evv'}, (error, result) => { 
                  if (!error && result && result.event === "success") { 
                    console.log('Done! Here is the image info: ', result.info); 
                    console.log(result.info.secure_url)
                    var result_url = result.info.secure_url;
                    console.log("result url is " + result_url)
                    document.getElementById("url").value = result_url;
                  }
                }
              )
             
              document.getElementById("upload_widget").addEventListener("click", function(){
                myWidget.open();
             
                }, false);

               
              </script>

所以我在这里显示来自数据库的当前图像：<div class="image"style="background: url('<%= ogImgUrl %>') center; 但现在我想用我使用 Cloudinary 小部件上传的新图像来更新该图像。请记住，只要我上传照片，我就会获得该图像的唯一网址，因此如果有办法更新原始照片然后显示更新后的照片，那就太好了。谢谢 ：）

标签： javascripthtmlejscloudinary

解决方案

如果要更新现有图像，可以public_id在上传过程中指定相同的内容。您可能还想指定invalidate: true. 这将使任何 CDN 缓存失效，以确保您获得的是最新版本。

由于您使用的是上传预设，您还可以指定是否要使用原始文件名，允许/禁止公共 id。

我建议检查 Cloudinary Upload API以检查在上传调用期间可以传递的必需参数和可能参数。

推荐阅读