文件上传策略——XMLHttpRequest、Fetch

前言

项目中需要对上传逻辑进行功能重构/优化，因此需要拆分/加强功能，比如媒体文件的具体区分，文件大小，尺寸，裁剪等等。

此篇文章只针对当前场景下对上传方式进行部分总结。

1. 使用 XMLHttpRequest替代Fetch监听文件上传的进度

await new Promise((resolve, reject) => {
  const xhr = (this.xhr = new XMLHttpRequest());
  xhr.open("put", uploadUrl);
  xhr.setRequestHeader("auth", "xxx");
  xhr.upload.onprogress = (event) => {
    if (event.lengthComputable) {
      console.log("上传进度", event.loaded / event.total);
    }
  };
  xhr.onerror = () => {
    reject("上传失败！");
  };
  xhr.onabort = () => {
    reject("已取消上传");
  };
  xhr.upload.onabort = () => {
    reject("已取消上传");
  };
  xhr.onload = () => {
    if (xhr.status === 200) {
      resolve();
    }
  };
  xhr.send(file);
}).catch((e) => {
  throw new Error(e);
});

2. 采用Fetch方式进行直传（单次请求，文件大小小于5mb），此时不对上传进度进行监听，只暴露0和100%的进度。

3. 大文件采用分片上传、断点续传。

4. 大小文件均需要支持取消上传和异常监听，异常捕获。