前端预览图片的两种方式：转Base64预览或转本地blob的URL预览，并再重新转回去

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

预览图片

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

方案一 FileReader的readAsDataURL方法

复制粘贴即演示
代码如下：

<!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地址，从而方便进行展示

代码如下：

<!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>

附加方法 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;
    },

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
在这里插入图片描述