vue图片文件流blob前端进行处理展示

1、blob转url

r.data后端返回的数据    r.headers['content-type']响应头中的类型
let blob = new Blob([r.data], {type: r.headers['content-type']})
 this.blobUrl = window.URL.createObjectURL(blob);

2、blob转base64

		let blob = new Blob([r.data], {type: r.headers['content-type']})
        this.blobTobase64(blob).then(res => {
          let image = new Image();
          image.src = res
         // let w = window.open("", "_blank");
         // w.document.write(image.outerHTML);
         // w.document.close();
        })

	blobTobase64(blob) {
      return new Promise((reslove, reject) => {
        let fileReader = new FileReader()
        fileReader.onload = (e) => {
          reslove(e.target.result)
        }
        fileReader.readAsDataURL(blob)
        fileReader.onlerror = (e) => {
          reject(new Error('文件流异常'))
        }
      })
    },

mdn链接