el-upload 读取图片为Base64位数据

小编由于框架限制不能直接将图片上传到服务器，所有小编只能研究将图片转为base64位，虽然网上有很多的例子，但是最后还都是失败了，下面的代码是小编研究的结果，并且可以正常实现此功能，希望对后面的人有帮助。

前端HTML

 <el-upload
          class="avatar-uploader"
          ref="upload"
          action="#"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleChange"
          :on-change="onChange"
          :auto-upload="false"
          :data="addList">

          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

JS代码

 beforeUpload(){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onChange(file,fileList){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      //转base64
      reader.onload = function(e) {
        _this.imageUrl = e.target.result //将图片路径赋值给src
        _this.guideImage =e.target.result //将图片路径赋值给src

      }
      reader.readAsDataURL(file);
    },
    handleChange(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },