使用js实现预览上传的图片

<input
  type="file"
  accept="image/*"
/>

type="file" 设置input为文件上传控件
accept="image/*" 限制文件类型为图片

接下来，给 input 绑定监听事件

 let input = document.getElementsByTagName('input')[0]
 input.addEventListener('change', function () {
   console.log('ok')
 })

当上传图片的时候就会触发监听事件，控制台打印ok。

然后我们可以通过 input 元素的files属性拿到一个 对象，这个对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。
修改 input 的监听函数：

input.addEventListener('change', function () {
  const { files } = this
  console.log(files)
})

效果：

然后我们取出files的第一个对象，通过URL.createObjectURL()方法用来为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了File对象或Blob对象的 URL

input.addEventListener('change', function () {
  const { files } = this
  const f = files[0]
  console.log(URL.createObjectURL(f))
})

接下来我们创建一个 img 标签，并且将它的src设置为这个URL路径，然后再将 img 添加到页面

input.addEventListener('change', function () {
  const { files } = this
  const f = files[0]
  const img = document.createElement('img')
  img.src = URL.createObjectURL(f)
  img.style.width = '100px'
  document.body.append(img)
})