图片上传转base64码和base64码转图片回显

直接上代码小demo是用在vue里边写的

<template>
  <div>
    <input
      id="input"
      type="file"
      name="image"
      accept="image/jpg, image/jpeg, image/png"
      @change="changeImg($event)"
    >
    <br>
    <img :src="picPath" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
      picPath: ''
    }
  },
  methods: {
    changeImg(e) {
      const files = document.getElementById('input').files[0]
      // 转码base64
      const reader = new FileReader()
      let imgFile
      reader.readAsDataURL(files)
      reader.onload = e => {
        imgFile = e.target.result
        const arr = imgFile.split(',')
        // arr[1] 就是图片的 Base64编码字符串
        console.log(arr[1])

     	// 这里的 picPath 'data:image/png;base64,'+ base64为编码字符串拼接形成图片的
        this.picPath = 'data:image/png;base64,' + arr[1]
        console.log(this.picPath)
      }
    }
  }
}
</script>

<style  scoped>
img{
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
</style>

在线图片base64互转链接