关于

今天把在 cdn.jsdelivr.net 上的一大把静态资源全转存到了阿里云OSS上，本来也没准备搬，毕竟量太大了，所以会很麻烦，但是之前 jsdelivr 有挂掉过，然后网站的访问速度也有点慢，于是就开始了

OSS上传工具

正是为此而开发的

我写这个上传工具的目的，就是为了解决需要先将 jsdelivr 上的文件下载到本地，然后上传到OSS的弊端，同时这样做路径也会被打乱

前段时间在工作中也用到了OSS的Node SDK，于是就花了点时间写了这样一个转存工具

其中碰到的一部分问题

上传的操作在前端，所以说后端没有介入，这是一个纯静态页面，于是就碰到了一个问题

前端没有办法高效的保存上传记录

于是考虑到了使用cookie和session

Cookie & Session

一开始采用的是Cookie，起初并没有发现问题，后来因为上传记录太多了，达到了单个cookie的上限，所以就考虑分开存放，使用不同的cookie key保存（“logs1” ，“logs2” ，“logs3”），然后一顿操作之后发现还是不行，量过大就会导致页面无法访问

431 Request Header Fields Too Large

就是说header中的内容太大了，这大概也是头一次碰都这个报错

所以，最后还是使用了session，页面刷新上传记录不会丢失，关闭后打开就没了

Code

URL转File

getImageFileFromUrl(url, imageName) {
      return new Promise((resolve, reject) => {
        let blob = null;
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.setRequestHeader('Accept', '*/*');
        xhr.responseType = "blob";
        xhr.onload = () => {
          blob = xhr.response;
          let imgFile = new File([blob], imageName, {type: blob.type});
          resolve(imgFile);
        };
        xhr.onerror = (e) => {
          reject(e)
        };
        xhr.send();
      });
},

View

https://upload.qwq.wiki

Last

最后整完站点的加载时间大概缩短了2s左右

Ex - ploooosion！