在vue项目中如何实现图片预览

解决方案： 用input file标签选中图片后在img标签中显示图片

<template>
  <el-form-item label="文章封面">
    <!-- 用来显示封面的图片 -->
    <img v-if="cover" :src="cover" alt="" class="cover-img" ref="imgRef" />
    <img
      v-else
      src="../../../assets/images/cover.jpg"
      alt=""
      class="cover-img"
      ref="imgRef"
    />
    <br />
    <!-- 文件选择框，默认被隐藏 -->
    <input
      @change="coverChange"
      type="file"
      style="display: none"
      accept="image/*"
      ref="iptFile"
    />
    <!-- 选择封面的按钮 -->
    <el-button @click="$refs.iptFile.click()" type="text">+ 选择封面</el-button>
  </el-form-item>
</template>  

在img标签中src属性只能是 base64 或者 URL

所以input file标签上传文件后显示图片有两种实现方式

1. 转 BASE64

coverChange(e) {
    const file = e.target.files[0] // 获取文件对象
    const fr = new FileReader()
    fr.readAsDataURL(file) // 转成base64
    fr.onload = e => {	// 事件监听器，读取完文件触发
        this.cover = e.target.result  // 赋值给src属性
    }
}

2.转URL

coverChange(e) {
    const file = e.target.files[0] // 获取文件对象
    this.cover = URL.createObjectURL(file) // 转成URL, 赋值给src属性
}