前端预览图片的两种方式:转Base64预览或转本地blob的URL预览

预览图片

  • 一般情况下,预览图片功能,是后端返回一个图片地址资源(字符串)给前端,如:ashuai.work/static/img/...
  • 前端再把这个值丢到img图片的src属性中去即可
  • 之所以有这个图片地址资源,也是因为之前有上传图片的操作,后端存到文件服务器上,生成一份图片url地址
  • 但是某些情况下,需要前端去临时预览一下图片(是否上传是后续的操作,需要先看一下)
  • 这个时候,我们有两种方案
  • 方式一 转base64预览
  • 方式二 生成blob图片预览路径url

方案一 FileReader的readAsDataURL方法

复制粘贴即演示

代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <input type="file" id="fileInput">
    <img id="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 = 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地址,从而方便进行展示

代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <input type="file" id="fileInput">
    <img id="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>

A good memory is better than a bad pen. Write it down...

相关推荐
动能小子ohhh25 分钟前
html实现登录与注册功能案例(不写死且只使用js)
开发语言·前端·javascript·python·html
Jimmy1 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
crary,记忆2 小时前
微前端MFE:(React 与 Angular)框架之间的通信方式
前端·javascript·学习·react.js·angular
星空寻流年2 小时前
javaScirpt学习第七章(数组)-第一部分
前端·javascript·学习
巴巴_羊3 小时前
React JSX语法
javascript·react.js·ecmascript
爱分享的程序员3 小时前
前端面试专栏-主流框架:11. React Router路由原理与实践
前端·javascript·react.js·面试
weixin_459074353 小时前
在el-image组件的预览中添加打印功能(自定义功能)
前端·javascript·vue.js
海的诗篇_4 小时前
前端开发面试题总结-vue3框架篇(二)
前端·javascript·vue.js·面试·前端框架·vue
广药门徒4 小时前
ad24智能pdf输出的装配图没有四个边角那里的圆孔
前端·javascript·pdf
粥里有勺糖5 小时前
视野修炼第124期 | 终端艺术字
前端·javascript·github