前端图片转成base64

1、 fetch api请求，重点都是 responseType 要设置为blob，再使用 FileReader 的 readAsDataURL 方法把 blob 转成 base64

    getBase64 (imgUrl, callback) {

        fetch(imgUrl, {
            responseType: 'blob'
        }).then(response => {
                return response.blob();
            }).then(blob => {
                let oFileReader = new FileReader();
                oFileReader.onloadend = function (e) {
                    // base64结果
                    const base64 = e.target.result
                    // console.log(base64);
                    callback(base64)
                };
                oFileReader.readAsDataURL(blob);
            });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、使用new XMLHttpRequest();

 getBase64(imgUrl) {
     let xhr = new XMLHttpRequest();
     xhr.open('get', '/xxx.jpg', true);
     // 重点1
     xhr.responseType = 'blob';
     xhr.onload = function() {
         if (this.status == 200) {
              //得到一个blob对象
              let blob = this.response;
              // 重点2
              let oFileReader = new FileReader();
              oFileReader.onloadend = function(e) {
                  // 结果
                  const base64 = e.target.result
              };
              oFileReader.readAsDataURL(blob);
         }
     };
     xhr.send();
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20