js进行图片本地预览&&生成本地图片地址_js流文件如何生成地址-CSDN博客

本文链接：https://blog.csdn.net/web_wp/article/details/134813171

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <input type="file"/>
    <!-- img中 src可接收 Data URL格式 编码的base64流  src="data:image/png;base64;...文件流"
         data为文件 image/png为文件类型 base64为可选参数，存在则64后传递文件流 -->
    <img style="width:200px;height:160px" src=""/>
  </div>
</body>
<script>
  let inputDom = document.querySelector('input')
  let imgDom = document.querySelector('img')
  console.log(inputDom)
  //方法一 ： Data URL格式实现图片本地预览
  inputDom.addEventListener('change', (e)=>{
    // console.log(e.target.files[0])
    // let reader = new FileReader()
    // reader.addEventListener('load',(e)=>{
    //   const baseUrl = e.target.result
    //   console.log('baseUrl',baseUrl)
    //   imgDom.src=baseUrl
    // })
    // //（属异步任务）
    // reader.readAsDataURL(e.target.files[0])

    //方法二 createObjectURL使用本地内存url预览（属同步任务）
    let blobUrl = URL.createObjectURL(e.target.files[0])
    console.log('blobUrl', blobUrl) //需将（blob:）带上
    imgDom.src=blobUrl
    //需进行释放 否则一直存在内存中
    imgDom.addEventListener('load',()=>{
      URL.revokeObjectURL(blobUrl)
    })
  })
</script>
</html>