新上传javascript时自动更新图片

Posted 2023-03-25

【中文标题】新上传javascript时自动更新图片

【英文标题】：automatically update image when new one uploaded javascript

【发布时间】：2021-05-07 00:31:01

【问题描述】：

我希望能够更新我在将新图像上传到数据库时看到的图像。我正在使用 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 小部件上传的新图像来更新该图像。请记住，只要我上传照片，我就会获得该图像的唯一网址，因此如果有办法更新原始照片然后显示更新后的照片，那就太好了。谢谢:)

【参考方案1】：

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

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

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