vue 将图片url转base64

  <img :src="imgList[0]" width="600" @error="handleImageError" alt="0" @load="onloadImg" />

//当图片加载完成时，将图片url转成base64
      onloadImg(event) {
        this.urlTobase64(event.target.src, event.target.alt)
      },
      urlTobase64(url, index) {
        var that = this
        var img = new Image()
        img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾，处理缓存

        //支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理，加上这行会无法显示图片，导致拿不到base64)
        img.setAttribute('crossOrigin', '*')
        if (url) {
          img.onload = function () {
            var base64Url = that.getBase64Image(img)
            // console.log(base64Url) // 最终拿到的base64值
            that.img64[index] = base64Url		// 	保存数据
          }
        }
      },
      getBase64Image(img) {
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀，动态变换如 image/png
        return dataURL
      },

推荐扩展阅读
【VUE】将图片的url或file类型转换成base64，并压缩图片大小
链接: http://t.csdnimg.cn/VUD9Y