图片预览的方式

1.base64

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

2.bloburl

  
<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>  
```tu