本文介绍在 JavaScript 中通过 XMLHttpRequest 异步请求图片 URL 获取 Blob 对象，并利用 FileReader 将 Blob 转换为 Data URL 实现前端图片预览的完整流程与核心代码示例。
Blob 与 File 对象基础
前言
Blob 对象用于表示不可变的原始数据类文件对象，其数据形式不一定局限于 JavaScript 原生格式。File 接口基于 Blob 构建，继承了 Blob 的功能并扩展了支持用户系统文件的能力。
本文主要介绍如何在 JavaScript 中获取图片 URL 对应的 Blob 值，并基于此实现图片预览功能。
获取图片 URL 的 Blob 值
具体实现方法如下：
1）利用 XMLHttpRequest 对象获取图片 URL 的 Blob 值。
//获取图片的Blob值
function getImageBlob(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
if(cb) cb(this.response);
}
};
xhr.send();
}注意：此处必须使用 XMLHttpRequest 的异步模式，因为同步模式下无法正确设置 responseType = "blob"。
2）利用 FileReader 对象读取 Blob 对象的 data 数据，进而生成可预览的链接。
基于 FileReader 的图片预览实现
function preView(url){
let reader = new FileReader();
getImageBlob( url , function(blob){
reader.readAsDataURL(blob);
});
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.body.appendChild(img);
}
}总结
以上就是本文的全部内容，希望这些内容对您的学习或工作具有参考价值。如有疑问欢迎留言交流，感谢支持。