前端预览图片的两种方式：转Base64预览或转本地blob的URL预览
最新回答
软耳兔兔
2025-03-02 00:59:21
方法一：利用FileReader的readAsDataURL方法
此方法通过FileReader对象的readAsDataURL方法，实现图片的Base64编码。操作流程如下：
1. 生成FileReader实例。
2. 使用readAsDataURL方法读取指定图片文件。
3. 返回Base64编码的图片数据。
代码示例如下：
let imageFile = new FileReader();
let image = document.getElementById('image');
imageFile.readAsDataURL(image.files[0]);
image.src = imageFile.result;
方法二：利用URL.createObjectURL方法
此方法利用URL对象的createObjectURL方法，生成一个指向图片的URL，进而实现在页面中预览图片。具体步骤如下：
1. 将图片文件转换为Blob对象。
2. 使用createObjectURL方法生成URL。
3. 将生成的URL赋值给图片元素的src属性。
代码示例如下：
let imageFile = new File(['image data'], 'filename.jpg', {'type': 'image/jpeg'});
let image = document.getElementById('image');
let blobURL = URL.createObjectURL(imageFile);
image.src = blobURL;
总结而言，转Base64预览与转本地blob的URL预览各有优势：Base64编码方式体积小，适合在网络资源受限的场景下使用；而Blob的URL方式提供更高的兼容性和灵活性。根据实际需求，选择合适的预览方法，可以有效提升前端项目的用户体验。
热门标签
