上传文件 进度条展示缩略图

场景：上传图片或视频时展示进度条以及缩略图
2种方式：

第一种：FileReader.readAsDataURL()

获取一段data:base64的字符串
缺点：大文件可能导致页面崩溃, 比blob url消耗更多内存
文档：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL

<input type="file" id="file" name="file" />
<img id="img" src=""/>

document.getElementById("file").onchange = function () {
  // 创建文件读取对象
  let reader = new FileReader();
  let files = document.getElementById("file").files;
  reader.readAsDataURL(files[0]);

  // 当读取成功后触发
  reader.addEventListener(
    "load",
    function () {
      // result属性包含一个data:URL格式的字符串（base64编码)
      document.getElementById("img").src = reader.result;
    },
    false
  );

  if (files[0]) {
    reader.readAsDataURL(file);
  }
};

第二种:

createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
文章地址：https://blog.csdn.net/qq_39258552/article/details/84133770

let windowURL = window.URL || window.webkitURL;
// 获取当前文件的一个内存URL,这个 URL 的生命周期和创建它的窗口中的 document绑定
// URL.createObjectURL() 会创建一个 DOMString
document.getElementById("img").src = windowURL.createObjectURL(file)

获取视频的缩略图（防止取到黑屏图片）

ps:原文地址忘记了

let windowURL = window.URL || window.webkitURL;
if (file.type.match("video.*")) {
  this.getVideoImage(
    windowURL.createObjectURL(file),
    (src, time) => {
      console.log(src)
    },
    1
  );
}

/**
 * 获取封面第一帧及时长
 * path 路径
 * callback 回调
 * secs 在第几秒开始截取
 */
getVideoImage(path, callback, secs = 1) {
  var me = this,
    video = document.createElement("video");
  video.onloadedmetadata = function () {
    if ("function" === typeof secs) {
      secs = secs(this.duration);
    }
    this.currentTime = Math.min(
      Math.max(0, (secs < 0 ? this.duration : 0) + secs),
      this.duration
    );
  };
  video.onseeked = function (e) {
    var canvas = document.createElement("canvas");
    canvas.height = video.videoHeight;
    canvas.width = video.videoWidth;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    let src = canvas.toDataURL("image/jpeg");
    callback.call(me, src, this.currentTime, e);
  };
  video.onerror = function (e) {
    callback.call(me, undefined, undefined, e);
  };
  video.src = path;
},