图片上传本地预览

最新推荐文章于 2024-06-03 09:20:03 发布

一步一步往前走！

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量71

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44957344/article/details/129179543

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

转成blob：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传本地预览</title>
</head>
<body>
  <input type="file" id="upload">
  <script>
  	// 图片本地预览
	document.querySelector('#upload').onchange = function(e) {
	  console.log(e.target.files[0]);
	  let imgurl = window.URL.createObjectURL(e.target.files[0])
	  console.log(imgurl);
	  let img = document.createElement('img')
	  img.src = imgurl
	  document.body.appendChild(img)
	}
  </script>
</body>
</html>

转成base64:

// 图片本地预览
document.querySelector('#upload').onchange = function(e) {
  console.log(e.target.files[0]);
  let reader = new FileReader(); //实例化文件读取对象
  reader.readAsDataURL(e.target.files[0]); //将文件读取为 DataURL,也就是base64编码
  reader.onload = (e)=> { //文件读取成功完成时触发
      dataURL = e.target.result; //获得文件读取成功后的DataURL,也就是base64编码
      let img = document.createElement('img')
      img.src = dataURL
      document.body.appendChild(img)
  }
}