1. require的方式

    用vue引入图片的require方式获取的值可以直接生成base64格式，但是该方法只适用于5kb大小以下的图片

    const path = require('@/assets/images/test.png')

  2. canvas.toDataURL()

    该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型，如果传入的类型和生成的类型不同，则表示该方法不支持该类型的图片，例如gif图片转换后是png

    imgUrlToBase64(url) {      return new Promise((resolve, reject) => {        if (!url) {          reject('请传入url内容')        }        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {          // 图片地址          const image = new Image()          // 设置跨域问题          image.setAttribute('crossOrigin', 'anonymous')          // 图片地址          image.src = url          image.onload = () => {            const canvas = document.createElement('canvas')            const ctx = canvas.getContext('2d')            canvas.width = image.width            canvas.height = image.height            ctx.drawImage(image, 0, 0, image.width, image.height)            // 获取图片后缀            const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase()            // 转base64            const dataUrl = canvas.toDataURL(`image/${ext}`)            resolve(dataUrl || '')          }        } else {          // 非图片地址          reject('非(png/jpe?g/gif/svg等)图片地址');        }      })    },

  3. FileReader.readAsDataURL()

    getBase64(imgUrl) {      return new Promise((resolve, reject) => {        if (!imgUrl) {          reject('请传入imgUrl内容')        }        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(imgUrl)) {          window.URL = window.URL || window.webkitURL          var xhr = new XMLHttpRequest()          xhr.open('get', imgUrl, true)          xhr.responseType = 'blob'          xhr.onload = function() {            if (this.status == 200) {              // 得到一个blob对象              var blob = this.response              const oFileReader = new FileReader()              oFileReader.onloadend = function(e) {                const base64 = e.target.result                resolve(base64 || '')              }              oFileReader.readAsDataURL(blob)            }          }          xhr.send()        } else {          // 非图片地址          reject('非(png/jpe?g/gif/svg等)图片地址')        }      })    },