本地图片预览

组件库：Upload 上传（element plus）

<template>
  <el-upload
    class="avatar-uploader"
    ref="uploadRef"
    :show-file-list="false"
    :auto-upload="false"
    :on-change="onSelectFile">
    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script setup>
const onSelectFile = (uploadFile) => {
  // 本地图片预览
  // imgUrl.value = URL.createObjectURL(uploadFile.raw)

  // 基于 FileReader 读取图片预览
  const reader = new FileReader()
  reader.readAsDataURL(uploadFile.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
}
</script>

原生写法

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="图片预览...">

<script>
  function previewFile() {
    var preview = document.querySelector('img')
    var file = document.querySelector('input[type=file]').files[0]
    var reader = new FileReader()

    reader.addEventListener("load", function () {
      preview.src = reader.result
    }, false)

    if (file) {
      reader.readAsDataURL(file)
    }
  }
</script>