🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
预览图片
- 一般情况下，预览图片功能，是后端返回一个图片地址资源（字符串）给前端，如：ashuai.work/static/img/… 前端再把这个值丢到img图片的src属性中去即可
- 之所以有这个图片地址资源，也是因为之前有上传图片的操作，后端存到文件服务器上，生成一份图片url地址
- 但是某些情况下，需要前端去临时预览一下图片（是否上传是后续的操作，需要先看一下）
- 这个时候，我们有两种方案
- 方式一 转base64预览
- 方式二 生成blob图片预览路径url
方案一 FileReader的readAsDataURL方法
复制粘贴即演示
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><inputtype="file"id="fileInput"><imgid="previewImage"src=""alt="Preview Image"><script>const fileInput = document.getElementById('fileInput');const previewImage = document.getElementById('previewImage');
fileInput.addEventListener('change',function(){const file = fileInput.files[0];const reader =newFileReader();
reader.onload=function(e){const base64String = e.target.result;
previewImage.src = base64String;
console.log('图片读取的Base64的值为--->', base64String);};
reader.readAsDataURL(file);});</script></body></html>
解析：
- FileReader 之所以能读出图片的 Base64 的值
- 是因为 readAsDataURL 方法本身就可以将图片的二进制数据转化为 Base64 编码
- 并将编码后的字符串以 Data URL 的形式返回以供使用
就是语言的创造者提前把这个图片转Base64的功能封装成一个方法以供我们调用
方案二 URL.createObjectURL方法
createObjectURL是JS自带的一个函数，它可以将Blob、File等二进制文件转为浏览器可直接显示的URL地址，从而方便进行展示
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"></head><body><inputtype="file"id="fileInput"><imgid="previewImage"src=""alt="Preview Image"><script>const fileInput = document.getElementById('fileInput');const previewImage = document.getElementById('previewImage');
fileInput.addEventListener('change',function(){const file = fileInput.files[0];let tempUrl = window.URL.createObjectURL(file)
console.log('blob--->', tempUrl);// blob:http://127.0.0.1:5500/84d2e951-33dc-4fea-840a-f3d8f3396766
previewImage.src = tempUrl;});</script></body></html>
附加方法 Blob转Base64方法
imageBase64:function(img) {
var toBase64= new Promise(function(resolve, reject){
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", img, true);
// 至关重要
xhr.responseType = "blob";//文件流
xhr.onload = function (res) {
if (res.currentTarget.status == 200) {
//得到一个blob对象
var blob = res.currentTarget.response;
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
let base64 = e.target.result;//base64
resolve(base64)
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
});
return toBase64;
},
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
标签：
前端
本文转载自: https://blog.csdn.net/qq_40716795/article/details/140358930
版权归原作者 林恒smileZAZ 所有， 如有侵权，请联系我们删除。
版权归原作者 林恒smileZAZ 所有， 如有侵权，请联系我们删除。