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

Question

在我的网络应用程序中，我有大量缩略图，用户可以从原始图像中选择缩略图和客户端重新编制以重新创建新的缩略图。

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

我知道我可以使用一些image.jpg？sometimestamp以确保浏览器必须下载新版本的缩略图，但正如我所说，应用程序需要非常敏感，即使在小而慢的互联网连接上。 （这就是为什么应用程序本身存储在用户的计算机上而不是现场下载。只有上传，下载和jsons转换）

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

所以我不是问如何不缓存文件或如何强制重新验证每个调用，我问我如何从浏览器的缓存中删除某些特定文件。

ps：这可以是一个仅限webkit的解决方案，因为这是它运行的唯一平台。（它实际上是Qt项目的qtwebkit。

Answer 1

你不能。当您需要再次下载时，在请求中附加?[something_volatile]，您将获得相同的效果。如果您只在需要时更改附肢字符串，那么该方法不会消除任何快照。

Answer 2

函数window.URL.revokeObjectURL（）可以解决您的问题。

URL.revokeObjectURL（）静态方法释放先前通过调用window.URL.createObjectURL（）创建的现有对象URL。在使用完对象URL后调用此方法，以便让浏览器知道它不再需要保留对文件的引用。

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

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

Answer 3

对不起necropost，但我认为它可能对同样情况下的其他人有所帮助：

上传完成后，使用no-cache header执行AJAX get请求。

通过在REQUEST中指定它，您可以告诉浏览器忽略缓存并向服务器执行新请求。

假设我在/images/jondoe.jpg上有一个缓存的图像，它可能是这样的：

代码（using 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
})

Answer 4

也许this link对你有用，根据它，你可以使用下面的代码：

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