将选中的图片渲染到页面上面预览

今天朋友了两个需求一个就是将图片转换为base64格式的当做参数传过去,因为之前的图片都是二进制(binary) ,现在就是base64格式的

还有一个就是将选中的图片渲染到页面上面预览

1 . 第一个

因为我们本身的选择文件框很丑,所以我们可以通过,隐藏,然后点击另外一个按钮来调用这个按钮的事件

 <!-- 渲染一个被隐藏的文件选择框，只允许选中图片文件 -->
        <input
          type="file"
          style="display: none"
          accept="image/*"
          ref="iptRef"
          @change="onFileChange"
        />
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$refs.iptRef.click()"
          >选择图片</el-button
        >
        <el-button
          type="success"
          icon="el-icon-upload"
          @click="uploadAvatar"
          :disabled="!avatar"
          >上传头像
        </el-button>
        
        
    //1.头像预览  提前要在data里面定义一个变量avatar
    onFileChange(e) {
      //(1)获取选中的文件
      const file = e.target.files[0];
      if (file) {
        //(2) 创建 FileReader 对象
        const fr = new FileReader();
        //(3)调用 readAsDataURL 函数，读取文件内容
        fr.readAsDataURL(file);
        //(4)监听 fr 的 onload 事件
        fr.onload = (e) => {
          // 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
          this.avatar = e.target.result;
        };
      }
    },

第二个

这个就是文章先用一个默认的封面顶上,然后选中了一个图片之后我们就覆盖原来的图片

       <img src="../../assets/images/cover.jpg" alt="" ref="imgRef" />
          <br />
          <input
            type="file"
            style="display: none"
            ref="fileRef"
            @change="doChange"
          />
          <el-button type="primary" @click="$refs.fileRef.click()"
            >上传封面<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          
   doChange(e) {
      // 获取到用户选择的封面
      const file = e.target.files[0];
      if (file) {
        // 绑定到data中
        this.pubForm.cover_img = file;
        //生成url
        const url = URL.createObjectURL(file);
        //显示到img
        this.$refs.imgRef.setAttribute("src", url);
      }
    },