本地预览图片（无需上传到后端返回url）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id="fileInput">
<img id="preview" src="">
<script>
const fileInput = document.getElementById("fileInput")
console.log(fileInput)
fileInput.addEventListener("change", function (event) {
const file = event.target.files[0] //类型为File对象
const fileUrl = URL.createObjectURL(file) //类型为string。blob:http://localhost:63342/e368955d-79e0-4d2e-b635-5c454a683581
document.getElementById("preview").src = fileUrl
console.log("file", event, file, fileUrl)
})
</script>
</body>
</html>
页面销毁时候记得销毁 URL.revokeObjectURL(fileUrl) //释放内存
转成base64后渲染图片
// 转换为base64编码
const imgEl = document.querySelector(".img")
const fileReadBase64 = new FileReader()
document.getElementById("fileInput").addEventListener("change", function (event) {
const file = event.target.files[0] //类型为File对象
fileReadBase64.readAsDataURL(file) // 转换为base64编码
})
fileReadBase64.onload = function (e) {
imgEl.src = fileReadBase64.result
}
//readAsArrayBuffer 转换为ArrayBuffer对象
const fileReadBuffer = new FileReader()
fileReadBuffer.readAsArrayBuffer(blob)
fileReadBuffer.onload = function (e) {
console.log("this.result", this.result)
}
// 下载图片URL.createObjectURL()下载图片，会常见一个Blob URL可用于img.src做为展示，也能做为二进制数据下载链接
const aEl = document.querySelector(".download")
fileInput.onchange = function (event) {
const file = this.files[0];
aEl.download = file.name //下载文件名
aEl.href = URL.createObjectURL(file) //下载链接
}
