方法一，使用 FileReader 解析blob对象()

Blob(Binary Large Object)术语最初来自数据库（oracle 中也有类似的栏位类型。），早期数据库因为要存储声音、图片、以及可执行程序等二进制 (opens new window)数据对象所以给该类对象取名为Blob。 在Web领域，Blob被定义为包含只读数据的类文件对象。

Blob 的创建方式

一.使用构造函数方式创建

 var blob = new Blob(["Hello World!"],{type:"text/plain"});
//或者转化为blob格式
var blob=response.blob()

二.使用Ajax方法返回 Blob 格式

 var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.send()
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response;
          }
      

三.使用Promise的Fetch方法返回Blob

    getbase64(imgURL) {
      // fetch方法为更现代的XMLHttpRequest方法
      fetch(imgURL)
        .then((response) => {
          // 转化为blob格式
          return response.blob();
        })
        .then((newBlob) => {
          // 将blob重新转化为URL，即还原imgURL
          console.log(URL.createObjectURL(newBlob));
        });
    },

实操：

  // 图片转base64
    getBase64(imgUrl) {
         let vm1 = this;
      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;
            let vm2 = vm1;
          // console.log("blob", blob)
          // 至关重要
          let oFileReader = new FileReader();
              //为了触发onloadend
          oFileReader.readAsDataURL(blob);
          oFileReader.onloadend = function (e) {
          //得到base64格式
           let base64= e.target.result;
              //此处的vm3为外部的this，如vue实例等
              let vm3 = vm2;
            //console.log(base64)
              vm3.base64=base64
          };
           //--------------------------------------
          // 如果只是想获取base64编码直接返回就可以了
          // URL.createObjectURL() 为从 blob 对象中创建一个新的 URL 对象(可用于图片地址引用)
         console.log(window.URL.createObjectURL(blob))
          //====为了在页面显示图片，可以删除====
           var img = document.createElement("img");
           img.onload = function (e) {
             window.URL.revokeObjectURL(img.src); // 清除释放
           };
           let src = window.URL.createObjectURL(blob);
           img.src = src
           document.getElementById("container1").appendChild(img);
          //====为了在页面显示图片，可以删除====
        }
      };
      xhr.send();
    },

方法二，使用canvas画布来编码base64格式

   changeBase64(url) {
      var imgSrc = url; // 图片本地路劲
      var image = new Image();
       // 注意：如果不是本地图片，一定要注意服务器是否允许跨域，然后设置图片跨域属性
      //  imgObj.setAttribute("crossOrigin",'anonymous')
      image.src = imgSrc;
      image.onload = () => {
        // 创建画布
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        // 返回一个canvas 二维绘图的上下文，其中带有一系列对应的API
        var ctx = canvas.getContext("2d");
        // drawImage() 方法在画布上绘制图像、画布或视频。
        // 在画布上定位图像，并规定图像的宽度和高度（设置canvas宽高等于图片实际宽高）：
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // ext为图片路径"."后面的文件格式名
        var ext = image.src
          .substring(image.src.lastIndexOf(".") + 1)
          .toLowerCase();
        // toDataURL()方法是类似于fileReader的readAsDataURL()方法，用于转化base64格式
        // 第一个参数type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等
        // 第二个参数用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替
        //toDataURL方法应该写在<img>的onload事件中以确保 canvas 的绘制工作在图片下载完成后开始
        var dataUrl = canvas.toDataURL("image/" + ext);
        var base64 = JSON.parse(JSON.stringify(dataUrl)); // 这里就是转化成的编码
        //base64=base64.replace(/^data:image\/\w+;base64,/, "");//去掉base64位头部
        return base64;
      };
    },