文章目录
1、前言
- 一般来说，都是 后端返回给前端图片的
url，前端直接把这个值插入到 img 的src 里面即可 - 还有一种情况是前端需要预览一下图片，比如：上传头像按钮，前端需要临时
预览一下图片
这个时候就有两种方案了
- 方式一 转base64预览
- 方式二 生成blob图片预览路径url
1、FileReader
可以利用 FileReader 把文件转成 base64格式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputid="file1"type="file"value="FileReader.readAsDataURL 方式"multiple><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);// 处理错误情况});}})functionloadFiles(files){const promises =[]for(const item of files){
promises.push(readFile(item))}return Promise.all(promises);}// 利用 promise 封装一个生成 base64的 函数，因为 onload 事件不是同步的，它需要事件处理functionreadFile(file){returnnewPromise((resolve, reject)=>{const reader =newFileReader();
reader.onload=(event)=>{const result = reader.result;if(typeof result ==='string'){resolve(result);}else{reject(newError("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 属性上，也可以直接放在浏览器打开
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputid="file2"type="file"value="createObjectURL 方式"multiple><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 MDN
- FileReader MDN
本文转载自: https://blog.csdn.net/qq_45634593/article/details/139352405
版权归原作者 嘤嘤怪呆呆狗 所有， 如有侵权，请联系我们删除。
版权归原作者 嘤嘤怪呆呆狗 所有， 如有侵权，请联系我们删除。