js 将图片转换为base64编码

法一:

    getBase64 (url) {
      return new Promise((resolve, reject) => {
        // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
        let Img = new Image();
        Img.src = url;
        Img.onload = () => { // 要先确保图片完整获取到，这是个异步事件
          let dataURL = '';
          let canvas = document.createElement('canvas'); // 创建canvas元素
          let width = Img.width; // 确保canvas的尺寸和图片一样
          let height = Img.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext('2d').drawImage(Img, 0, 0, width, height); // 将图片绘制到canvas中
          dataURL = canvas.toDataURL('image/jpeg'); // 转换图片为dataURL
          resolve(dataURL);
        };
      });
    },

法二:

    getBase64 (url) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        if (this.curFile) {
          // 将文件以Data URL形式读入页面
          let imgUrlBase64 = reader.readAsDataURL(this.curFile);
          console.log('imgUrlBase64', imgUrlBase64);
          reader.onload = function (e) {
            resolve(reader.result);
          };
        }
      });
    },

法二的 this.curFile 是input上传的文件

<input type="file" name="file" title="点击选择文件" accept="image/jpeg, image/png" @change="fileUploadFlow">

fileUploadFlow (e) {
  this.curFile = e.target.files[0];
};

需要将图片转换成base时就可以直接调用

let docObj = document.getElementById('doc');
let base64Img = await this.getBase64(window.URL.createObjectURL(docObj.files[0]));
console.log(base64Img);

给后台传值，需要截取字符串

base64Img.split('base64,')[1];

参考文章