base64格式图片上传

FileReader与readAsDataURL

• FileReader 文件读取器,用来把文件读入内存中。
• readAsDataURL 可以读取base64格式的图片对象。

   data(){
    return{
       avatar:''   //存放图片内容
    }
}
methods: {
    chooseImg () {
          this.$refs.iptRef.click() //触发input的默认点击事件
        },  
    onFileChange (e){  //在input值改变是触发
        if (e.target.files.length === 0) {
                this.avatar=""
              } else {
                // new FileReader() 文件读取器,可以读取base64格式的图片对象
                const reader = new FileReader() //先将读取器存到变量里
                // 读取图片对象
                reader.readAsDataURL(e.target.files[0]) //readAsDataURL读取图片对象
                // 3.监听onload文件读取完毕事件
                reader.onload =  () =>{
                  this.avatar = reader.result  //将读取出的内容赋值到avatar中
               }
            }
    }
 }

使用
当avatar被赋值后显示,第一个ing图片,这时第二个img图片会隐藏

  <img :src="avatar" alt="" v-if="avatar" />
  <img src="@/assets/images/avatar.jpg" alt="" v-else />
<!-- 按钮区域 -->
        <input
          type="file"
          accept="inage/*"
          style="display: none"
          ref="iptRef"
          @change="onFileChange"
        />
        <!-- 当input值改变时触发这个事件 -->
 <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>