产品查询展示型网站,给别人做网站能赚钱吗,网站设计与网页配色实例精讲,网络广告的传播技巧#x1f9d1;#x1f4bb; 写在开头 点赞 收藏 学会#x1f923;#x1f923;#x1f923;
预览图片 一般情况下#xff0c;预览图片功能#xff0c;是后端返回一个图片地址资源#xff08;字符串#xff09;给前端#xff0c;如#xff1a;ashuai.work/static… 写在开头 点赞 收藏 学会
预览图片 一般情况下预览图片功能是后端返回一个图片地址资源字符串给前端如ashuai.work/static/img/… 前端再把这个值丢到img图片的src属性中去即可 之所以有这个图片地址资源也是因为之前有上传图片的操作后端存到文件服务器上生成一份图片url地址 但是某些情况下需要前端去临时预览一下图片是否上传是后续的操作需要先看一下 这个时候我们有两种方案 方式一 转base64预览 方式二 生成blob图片预览路径url
方案一 FileReader的readAsDataURL方法
复制粘贴即演示 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0
/head
bodyinput typefile idfileInputimg idpreviewImage src altPreview Imagescriptconst fileInput document.getElementById(fileInput);const previewImage document.getElementById(previewImage);fileInput.addEventListener(change, function () {const file fileInput.files[0];const reader new FileReader();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地址从而方便进行展示
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0
/head
bodyinput typefile idfileInputimg idpreviewImage src altPreview Imagescriptconst 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-f3d8f3396766previewImage.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;//base64resolve(base64)};oFileReader.readAsDataURL(blob);}}xhr.send();});return toBase64;},如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
