el-upload上传图片并获取图片的base64编码

<el-upload

    class="upload-demo"
    drag
    action=""
    :before-upload="beforeUploadFile"
    accept=".jpg, .jpeg, .png"
  >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">拖拽图片到此处，或<em>点击上传</em></div>
</el-upload>

beforeUploadFile(file) {
    let types = ['image/jpeg', 'image/png']
    let msg = '上传图片只能是 JPG/PNG格式!'
    const isImage = types.includes(file.type)

    if (!isImage) {
      this.$message.error(msg)
      return false
    }

    const isLimit = file.size / 1024
    if (isLimit < 10) {
      this.$message.error('图片不能小于10KB')
      return false
    }

    if (isLimit > 200) {
      this.$message.error('图片不能大于200KB')
      return false
    }


    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      this.base64Img = e.target.result //此为base64编码
      if(this.base64Img.includes('data:image/jpeg;base64,')) {
        this.imageDataBase64 = e.target.result.split('data:image/jpeg;base64,')[1]
      }

      if(this.base64Img.includes('data:image/png;base64,')) {
        this.imageDataBase64 = e.target.result.split('data:image/png;base64,')[1]
      }
    }

    // 阻止默认上传行为
    return false
  }