fetch 获取图片视频资源

前端获取cdn上资源时，如果cdn资源更新，前端 img 、video 等标签获取资源大概率会命中本地缓存资源

那么如何能够更新这些资源呢，让页面显示新的资源呢，（指在不做强制刷新，关闭浏览器，清空缓存等操作的前提下）

方案一,当然是在加载这些资源时，在网络资源路径末尾增加时间戳参数，当然这也是最简单最直接的方式，

增加了时间戳后，每次请求都会不同，所以浏览器不会认为是相同资源，也就不会命中缓存

那么问题来了

为了加速页面访问，我们通常会使用 cdn 来缓存资源减轻源服务器压力，cdn 有多种配置，
配置1 ，可采用去除链接参数的方式，以提高cdn命中，方案一，没有任何问题

配置2，携带参数缓存，原因有很多

（例如获取的图片，或视频等资源要通过参数由服务器进行加工，

例如阿里云oss服务可对图片等资源进行缩放、裁剪、质量转换、格式转换等，此时cdn要缓存这类数据，以减少对资源多次加工造成的不必要的资源浪费）

以上场景，运营人员如何确定该 固定 路径资源已经回源成功呢

提供一种方案

方案二，fetch 获取网络资源

fetch(`${fileUrl}?x-oss-process=image/resize,w_750`,
  {headers: {'OKAccess-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': true, 'cache': "no-cache",'Cache-Control': 'no-cache'}})
  .then(response => {
  response.arrayBuffer().then(res => {
    let blob = new Blob([res], {type: 'image/*'});  // 常用资源类型 1，image/* 2，video/* 3，audio/* 
    let objectUrl = URL.createObjectURL(blob);
　　 document.getElementById('linkImg').src = objectUrl;　　//linkImg 一个 img 标签

    document.getElementById('linkImg').onload = function (){
      URL.revokeObjectURL(objectUrl); // 这一步属于脑子一抽，不知道有没有必要，欢迎交流
    }
　　// 下载资源就使用a标签

　　let a = document.createElement("a");
　　document.body.appendChild(a);
　　a.style = "display: none";
　　a.href = objectUrl;
　　a.download = fileName
　　a.click();
　　document.body.removeChild(a);
  })

})