前端預覽圖片的兩種方式：轉Base64預覽或轉本地blob的URL預覽，並再重新轉回去

林恒發表於2024-07-11
前端

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

預覽圖片

  • 一般情況下，預覽圖片功能，是後端返回一個圖片地址資源（字串）給前端，如：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;
	},

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

前端預覽圖片的兩種方式：轉Base64預覽或轉本地blob的URL預覽，並再重新轉回去

相關文章