vue中把http/https图片通过base64显示出来

1、创建XHR对象，调用XMLHttpRequest构造函数
2、启动请求以备发送数据
3、设置返回响应数据的类型
4、发送数据
5、调用FileReader对象的方法，将文件读取为二进制码
6、readAsDataURL 方法可以将读取到的文件编码成DataURL
7、onload文件读取成功时触发

 _downLoad(url) {
      const url2 = url.replace(/\\/g, "/");
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url2, true);
      xhr.responseType = "blob";
      xhr.onload = () => {
        if (xhr.status === 200) {
          //下载
          this.download（xhr.response）
          
          //获取base64 start
          const reader = new FileReader();
          reader.onloadend = () => {
            console.log(reader);
          };
          reader.readAsDataURL(xhr.response);
           //获取base64 end

        }
      };
      xhr.send();
    }

获取文件流并下载

download(blob, filename) {
      const a = document.createElement("a");
      a.download = filename;
      const blobUrl = URL.createObjectURL(blob);
      a.href = blobUrl;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(blobUrl);
    },

其他知识点

1：FileReader : 读取文件内容
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
abort: 中断读取

2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发

responseType类型

key	含义
“”	responseType 为空字符串时，采用默认类型 DOMString，与设置为 text 相同。
arraybuffer	response 是一个包含二进制数据的 JavaScript ArrayBuffer
blob	response 是一个包含二进制数据的 Blob 对象 。
document	response 是一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型。
json	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
text	response 是一个以 DOMString 对象表示的文本。
ms-stream	response 是下载流的一部分；此响应类型仅允许下载请求，并且仅受 Internet Explorer 支持。