如何从浏览器缓存中删除图片

Question

在我的Web应用程序中，我有一个大量的缩略图集合，用户可以选择一个缩略图并在客户端重新裁剪原始图像以创建新的缩略图。

这很好，在我的应用程序中，我只需立即将新创建的图像设置为图像源，而无需从服务器重新加载它，并且接下来，新图像会上传到服务器。这是为了确保非常敏感的感觉。问题是，当用户刷新页面时，他会看到缓存的旧缩略图版本。

我知道我可以使用一些image.jpg?sometimestamp来确保浏览器必须下载缩略图的新版本，但正如我所说，应用程序需要非常响应，即使在小型和慢速互联网连接上也是如此。（这就是为什么应用程序本身存储在用户的计算机上，而不是实时下载。只有上传，下载和json正在传输）

理想的解决方案是能够告诉浏览器：从您的缓存中删除此特定文件：someurl.com/somefolder/image.jpg，以便浏览器在需要时再次获取它。这可能吗？如何操作？

因此，我不是在问如何不缓存文件或如何强制每个调用进行重新验证，而是在问如何将某些特定文件从浏览器缓存中删除。

附注：这可以是仅适用于Webkit的解决方案，因为这是它运行的唯一平台。（实际上是Qt项目中的qtwebkit。）

- Vincent Duprez

Answer 1

函数 window.URL.revokeObjectURL() 可以解决您的问题。

URL.revokeObjectURL() 静态方法会释放之前通过调用 window.URL.createObjectURL() 创建的已存在的对象 URL。当您完成使用一个对象 URL 时，请调用此方法，以便让浏览器知道它不再需要保留文件的引用。

详细信息请参考：https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL

请注意，这是一个具有有限跨浏览器支持的实验性函数。

- Xuesen Liang

---

似乎现在所有浏览器都可用： https://caniuse.com/?search=revokeObjectURL --- 从你的链接中: "这个特性在Web Workers中可用"。你能发一些使用它的代码示例吗？...使用URL.revokeObjectURL（imgurl）;仍会将图像保留在缓存中，并且旧版本会在页面重新加载时显示出来。 - Avatar

Answer 2

抱歉打扰了，但我认为这对于处于同样情况的其他人可能会有所帮助：

当您的上传完成后，请使用no-cache header执行 AJAX 获取请求。

通过在请求中指定此内容，您告诉浏览器忽略缓存并执行向服务器的新请求。

假设我在/images/jondoe.jpg有一张缓存的图像，代码如下：

代码（使用 Axios）：

Axios.post('/upload/new-image', FormDataObject).then(() => { 
  Axios.get('/images/jondoe.jpg', {headers: {'Cache-Control': 'no-cache'}}).then(reloadPageFunction)
// Now you'll have a new image in your cache
})

- Charley C.

Answer 3

也许这个链接对您有用，根据它，您可以使用以下代码：

caches.open('v1').then(function(cache) {
    cache.delete('/images/image.png').then(function(response) {
        someUIUpdateFunction();
    });
})

- Atzi

---

这是Service Worker API的一部分，而不是标准浏览器API。 - floodlitworld

Answer 4

你无法直接下载。当你需要再次下载时，请在请求末尾添加?[something_volatile]，这样你将获得相同的效果。只有在需要更改附加字符串时，该方法才不会影响任何速度。

- Trevor Dixon

---

基本上，不再使用“?timestamp”了，而是更像“?version_tag”，你可以控制它。 - user1600124

我确实可以在数据库中存储最后修改时间，并将其用作易失性部分...这只需要1个SQL调用，但无论如何速度都很快。谢谢！ - Vincent Duprez