Vue front-end method for rendering blob binary object images

Recently doing development, joint debugging interface. The interface returns a picture, which is to process and render the binary picture, so hereby record it.

This article is a reprinted article, the original article: Vue front-end method for processing blob binary object images

The interface response is as shown below

Obviously, what is obtained is a bunch of garbled characters, and the front end needs to parse it out. After Baidu found out that the way to parse the binary document stream is as follows:
1. Add responseType when defining the interface

export function ImgTest() {
    
    
  return request1({
    
    
    url: "/test",
    method: "get",
    responseType: "blob",
  });
}

In methods, imgUrl is the received model

 ImgTest() {
    
    
   ImgTest().then((res) => {
    
    
     const url = window.URL.createObjectURL(new Blob([res]));
     console.log(url, "工作流图片");
     this.imgUrl = url;
   });
 },

which prints:

As a result, the picture can be displayed normally