场景：上传图片或视频时展示进度条以及缩略图
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;
},
