【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览
嘤嘤怪呆呆狗 2024-07-12 13:03:01 阅读 79
文章目录
1、前言1、FileReader3、window.URL.createObjectURL4、参考链接
1、前言
一般来说，都是 后端返回给前端图片的<code>url，前端直接把这个值插入到 img 的src 里面即可还有一种情况是前端需要预览一下图片，比如：上传头像按钮，前端需要临时 预览一下图片
这个时候就有两种方案了
方式一 转base64预览方式二 生成blob图片预览路径url
1、FileReader
可以利用 FileReader 把文件转成 base64格式
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<input id="file1" type="file" value="FileReader.readAsDataURL 方式" multiple>code>
<script>
let file1El = document.querySelector('#file1')
file1El.addEventListener('change', function (e) {
// 可能会上传多个文件
let files = e.target.files
console.log('files', files);
if (files.length != 0) {
loadFiles(files)
.then((fileContents) => {
console.log(fileContents); // 在所有文件加载完成后，打印包含所有文件内容的数组
fileContents.forEach(f => {
let imgEl = document.createElement('img')
imgEl.src = f
imgEl.style.width = '100px'
imgEl.style.height = '200px'
document.body.appendChild(imgEl)
})
})
.catch((error) => {
console.error(error); // 处理错误情况
});
}
})
function loadFiles(files) {
const promises = []
for (const item of files) {
promises.push(readFile(item))
}
return Promise.all(promises);
}
// 利用 promise 封装一个生成 base64的 函数，因为 onload 事件不是同步的，它需要事件处理
function readFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
const result = reader.result;
if (typeof result === 'string') {
resolve(result);
} else {
reject(new Error("Failed to read file"));
}
};
reader.onerror = (event) => {
reject(event.target.error);
};
// 参数file: 从中读取的 Blob 或 File 对象
reader.readAsDataURL(file);
});
}
</script>
</body>
</html>
3、window.URL.createObjectURL
window.URL.createObjectURL 方法 返回一个 url，可以直接放在 img 的src 属性上，也可以直接放在浏览器打开
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<input id="file2" type="file" value="createObjectURL 方式" multiple>code>
<script>
let file2El = document.querySelector('#file2')
file2El.onchange = function () {
let files = file2El.files
for (const item of files) {
// 接收 File、Blob 或 MediaSource 对象。
let url = window.URL.createObjectURL(item)
console.log('url', url);
let img = document.createElement('img')
// createObjectURL 返回的格式比如:blob: http://127.0.0.1:5500/3c9e3502-1c0c-4dae-b4dc-26b68f207285
img.src = url
document.body.appendChild(img)
}
}
</script>
</body>
</html>
4、参考链接
createObjectURL MDNFileReader MDN
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。