場(chǎng)景：上傳圖片或視頻時(shí)展示進(jìn)度條以及縮略圖
2種方式：
第一種：FileReader.readAsDataURL()
獲取一段data:base64的字符串
缺點(diǎn)：大文件可能導(dǎo)致頁面崩潰, 比blob url消耗更多內(nèi)存
文檔：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 () {
// 創(chuàng)建文件讀取對(duì)象
let reader = new FileReader();
let files = document.getElementById("file").files;
reader.readAsDataURL(files[0]);
// 當(dāng)讀取成功后觸發(fā)
reader.addEventListener(
"load",
function () {
// result屬性包含一個(gè)data:URL格式的字符串（base64編碼)
document.getElementById("img").src = reader.result;
},
false
);
if (files[0]) {
reader.readAsDataURL(file);
}
};
第二種:
createObjectURL返回一段帶hash的url慎冤，并且一直存儲(chǔ)在內(nèi)存中允青，直到document觸發(fā)了unload事件（例如：document close）或者執(zhí)行revokeObjectURL來釋放。
文章地址：https://blog.csdn.net/qq_39258552/article/details/84133770
let windowURL = window.URL || window.webkitURL;
// 獲取當(dāng)前文件的一個(gè)內(nèi)存URL,這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document綁定
// URL.createObjectURL() 會(huì)創(chuàng)建一個(gè) 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
);
}
/**
* 獲取封面第一幀及時(shí)長
* path 路徑
* callback 回調(diào)
* 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;
},
