本地图片文件转为base64格式

因为blob格式的图片存在一些访问渲染问题,因此想着能不能转为base64的进行渲染,找来的很多方法都不能使用,最终找到了以下方法

主要是使用readAsDataURL()将文件转化为base64格式,然后用FileReader的onload方法获取成功后的值,要注意的是onload方法中this指向的是FileReader实例,想在其中使用外部的方法需要用变量接收外部的上下文环境

 var img = document.getElementById('filepick')
      const that = this
      if (img.files[0].size >= 4500000) {
        that.$message.warning('图片体积大于4.5M,请重新选择')
        return
      }
      function ToBase64 () {
        /* 转换base64 */
        var imgFile = new FileReader()
        imgFile.readAsDataURL(img.files[0])
        imgFile.onload = function () {
          that.wallpaperData.currentImg = 'url(' + this.result + ')'
          that.wallpaperData.paperType = 'img'
          that.updatewallpaper()
        }
      }
      ToBase64()

                                                        参考链接:js获取本地图片并转换成base64格式 - it610.com