转成blob 预览<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="inputFile" type="file" accept="image/*">
<img src="" id="previewImage" alt="图片预览">
<script>
const $ = document.getElementById.bind(document);
const $inputFile = $('inputFile');
const $previewImage = $('previewImage');
$inputFile.addEventListener('change', function(e) {
const file = this.files[0];
console.log(e)
console.log(file)
$previewImage.src = file ? URL.createObjectURL(file) : '';
}, this);
</script>
</body>
</html>
图片转base64 (url 包含blob)
static imageToBase64(imgUrl) {
return new Promise((resolve, reject) => {
var imgFile = new FileReader();
imgFile.readAsDataURL(imgUrl);
imgFile.onload = function () {
var imgData = this.result; //base64数据
resolve(imgData)
}
})
}