前端实现图片上传前预览

193 阅读1分钟

Blob url法

let URL = null
if (window.createObjectURL !== undefined) {
// basic
//object要改为对应图片的file或者Blob对象(来着input等)
URL = window.createObjectURL(object)
} else if (window.URL !== undefined) {
// mozilla(firefox)
URL = window.URL.createObjectURL(object)
} else if (window.webkitURL !== undefined) {
// webkit or chrome
URL = window.webkitURL.createObjectURL(object)
}
// TODO:将img的url设置为URL

window.createObjectURL 是一个 Web API,它可以将一个 FileBlob 对象生成一个唯一的 URL 地址,以便在浏览器中进行预览或下载。

在页面加载完成后,我们可以调用 URL.revokeObjectURL(URL) 来释放资源。这些通过对象URL加载的资源将一直占用内存,可能会影响性能,因此我们需要记得调用该方法来释放资源