封面标签选择图片

基本代码

<el-form-item label="文章封面">
            <!-- 用来显示封面的图片 -->
            <img
              src="../../../assets/images/cover.jpg"
              alt=""
              class="cover-img"
              ref="imgRef"
            />
//不要在 img标签中使用 v-if 会报错
            <br />
            <!-- 文件选择框，默认被隐藏 -->
            <input
              type="file"
              style="display: none"
              accept="image/*"
              ref="iptFileRef"
              @change="onCoverChangeFn"
            />
            <!-- 选择封面的按钮 -->
            <el-button type="text" plain @click="addCoverImgFn"
              >+ 选择封面</el-button
            >
          </el-form-item>

导入图片

import defaultImg from '@/assets/images/cover.jpg'

具体逻辑

 addCoverImgFn() {
      // 模拟点击事件
      this.$refs.iptFileRef.click()
    },

// 封面选择改变事件
    onCoverChangeFn(e) {
      const files = e.target.files
      console.log('封面选择改变事件', e)
      if (files.length === 0) {
        //  用户没有选择图片
        this.pubForm.cover_img = null
        this.$message.error('请选择你要上传的图片')
        this.oldFox('请选择你要上传的图片')
        this.$refs.imgRef.setAttribute('src', defaultImg)
      } else {
        this.pubForm.cover_img = files[0]
        this.$message.success('添加封面成功')
        this.oldFox('添加封面成功')
        const url = URL.createObjectURL(files[0])
        this.url = url
        this.$refs.imgRef.setAttribute('src', url)
      }
      console.log('文件', files)
    }

---

1. 封面标签选择图片的思路是?

答案

• 先准备隐藏的input[type=file], 然后点击按钮, 用js的方式调用input标签的点击事件, 让文件选择窗口出现, 再给input标签绑定change事件通过事件对象拿到用户选择的图片文件