上传图片并获取图片的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编码

      // console.log(this.base64Img, 'this.base64Img')

      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

  }