1.首先在main.js中写一个函数并将函数挂载在全局变量中

// 图片转base64格式 挂载在全局
Vue.prototype.$base64Img = (e) => {
  return new Promise(function (resolve, reject) { // 使用Promise进行异步处理
    let fileSize = 0
    const fileMaxSize = 1024 // 设置图片最大为 1M
    fileSize = e.target.files[0].size // 获取图片大小
    const size = fileSize / 1024
    const file = e.target.files[0] // 获取图片文件对象
    const reader = new FileReader() // 实例化一个对象
    if (size > fileMaxSize) {
      e.target.value = '' // 内容清空
      resolve({ err: '图片大小必须小于1M' })
    } else if (size <= 0) {
      e.target.value = '' // 内容清空
      resolve({ err: '图片大小大小不能为0M' })
    } else {
      reader.readAsDataURL(file) // 把图片文件对象转换base64
      reader.onload = function (e) {
        resolve(e.target.result) // 回到函数返回base64值
      }
    }
  })
}

2. 在组件中的代码是

<template>
  <div class="register">
    <!-- PC端点击打开文件选择图片 -->
      <label for="img">
        <input type="button" id="btn" value="请上传识别图像" >
        <span id="text"></span>
        <input type="file" name="img" id="img" @change="handleFile"><br /><br />
      </label>
  </div>
</template>

<script>
export default {
  methods: {
    handleFile (e) {
      var filePath = document.querySelector('#img').value
      var arr = filePath.split('\\')
      document.querySelector('#text').innerHTML = arr[arr.length - 1]
      this.$base64Img(e).then((res) => { // 调用全局方法
        console.log(res) // 控制台打印出图片base64值
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.register{
  height: 100%;
  width: 100%;
  background: url('http://ahnu.co.cnki.net/Themes/default/images/loginBg.jpg') no-repeat;
  background-size: 105% 100%;
  padding-top: 200px;
}
.imagefile{
  width: 100%;
}

label{
  position: relative;
}
#img{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
#btn{
  margin-right: 5px;
  padding: 5px 10px;
  background: #00b0f0;
  color: #FFF;
  border: none;
  border-radius: 5px;
}
#text{
  color: black;
}

</style>


3.当你点击文件上传后，就可以实现本地图片转base64格式

1. 上传图片时：pc端正常可以传多张图片；手机端只能一张一张上传；(可以完善)；
使用前端框架有：WeUi，vant ；
style：
/*改造上传图片 */
.applay-uploadimg .weui-uploader__bd{  margin-bottom: 0;margin-right: 0; }
.applay-uploadimg .weui-uploader__input-box{width: 100px; height: 100px;}
.applay-uploadimg  .weui-uploader__file { margin-right: 15px;position: relative;width: 100px; height: 100px;}
.applay-uploadimg  .weui-uploader__file .upload-del{padding-top: 3px;position: absolute;right: 0px;bottom: 0;width: 100%;background-color: rgba(0,0,0,.5);}
js:代码
data:参数：
finished:false,
loading:false,
formData:new FormData(),//参数；暂时没有；可以扩展；
imgs: {},//上传身份证图片；暂时没有；可以扩展；
imgLen:0, //上传身份证图片长度；
imgCoverLen: 0,//上传门店图片长度；
entity:{
wechat_openid:open_id,
role_id:"",//等级
cover:[],
cardid:'',
cardid_photo:[],
},
/**
* 上传身份证图片
*/
addImg:function(event){
var that=this;
// that.$toast('图片上传中...');
let inputDOM1 = this.$refs.inputer;
// 通过DOM取文件数据
this.fil = inputDOM1.files;
let oldLen=this.imgLen;
let len=this.fil.length+oldLen;
if(len>2){
this.$toast('最多可上传2张，您还可以上传'+(2-oldLen)+'张');
return false;
}
// that.$toast.loading();
for (let i=0; i 
let size2 = Math.floor(this.fil[i].size / 1024);
if (size2 > 3*1024) {
this.$toast('请选择3M以内的图片！');
return false
}
this.imgLen++;
var reader = new FileReader();
reader.readAsDataURL(this.fil[i]);
reader.onload = function (e) {
// 读取到的图片base64 数据编码 将此编码字符串传给后台即可
var imgcode = e.target.result;
that.$toast.loading("上传图片中...");
axios.post('/api/uploads/add',{file:imgcode}).then(function(res){
if(res.data.code == 0){
that.entity.cardid_photo.push(res.data.data.url);
}else{
that.$toast(res.data.message);
}
})
}
}
//  console.log(this.entity.cardid_photo)
},
//删除上传的身份证照片；
delImg:function(key){
this.$delete(this.entity.cardid_photo,key);
this.imgLen--;
this.entity.cardid_photo=this.entity.cardid_photo;
// console.log(this.entity.cardid_photo)
},
addCoverImg:function(event){
var that=this;
let inputDOM2 = this.$refs.inputer2;
// var reader=new FileReader();
// 通过DOM取文件数据
this.fil2 = inputDOM2.files;
let oldLen=this.imgCoverLen;
let len=this.fil2.length+oldLen;
if(len>5){
this.$toast('最多可上传5张，您还可以上传'+(5-oldLen)+'张');
/*alert('最多可上传5张，您还可以上传'+(5-oldLen)+'张');*/
return false;
}
// that.$toast.loading();
for (let i=0; i 
let size = Math.floor(this.fil2[i].size / 1024);
if (size > 3*1024) {
this.$toast('请选择3M以内的图片！');
return false
}
this.imgCoverLen++;
var reader2 = new FileReader();
reader2.readAsDataURL(this.fil2[i]);
reader2.onload = function (e) {
// 读取到的图片base64 数据编码 将此编码字符串传给后台即可
var imgcode2 = e.target.result;
that.$toast.loading("上传图片中...");
axios.post('/api/uploads/add',{file:imgcode2}).then(function(res){
if(res.data.code == 0){
that.entity.cover.push(res.data.data.url);
}else{
that.$toast(res.data.message);
}
})
};
}
// console.log(this.entity.cover)
},
//删除上传的门店照片；
delCoverImg:function(key){
this.$delete(this.entity.cover,key);
this.imgCoverLen--;
this.entity.cover=this.entity.cover;
},

关于vue中img无法展示base64位图片的原因分析：
(1)返回不是base64位数据,这个不用多说。
(2)若服务端返回的确实是base64位数据，详细检查一下是否符合规范的base64格式
一次经历，服务端确实返回了base64位的数据如下：
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFQ==
乍一看还真是base64位数据，值也给到了img的src属性中，但是为啥还是不正常显示呢？
其实上述这个并不是标准的base64格式，标准的格式应该是这样的：data:image/png;base64,开头+服务端返回的数据，这样就可以了。标准如下：
data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjItRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er==
拼接示例如下：
realBase64='data:image/png;base64,'+data.FileForBase64;
点赞是最好的支持，关注是最大的鼓励。亲爱的朋友，很荣幸在简书遇到您,若有疑问，欢迎探讨~~~。

// 拍照获取图片base64
// imgsrc: base64图片资源
    refreshDataList (imgsrc) {
      let data = this.baseImg(imgsrc)
      console.log(data)
    },
// base64转图片资源
    baseImg (dataurl) {
      var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),n = bstr.length,
          u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
      return new Blob([u8arr], {type: mime})
    },


Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。

----------  创作不易，感谢大家，请多多支持！