近期做開發(fā)，聯(lián)調(diào)接口。接口返回的是一張圖片，是對二進制圖片處理并渲染，特此記錄一下。
本文章是轉(zhuǎn)載文章，原文章：Vue前端處理blob二進制對象圖片的方法
接口response是下圖
顯然，獲取到的是一堆亂碼，前端需要將其解析出來，百度之后發(fā)現(xiàn)解析二進制文檔流的寫法如下：
1.定義接口的時候加上responseType
export function ImgTest() {
return request1({
url: "/test",
method: "get",
responseType: "blob",
});
}
methods中，imgUrl是接收的模型
ImgTest() {
ImgTest().then((res) => {
const url = window.URL.createObjectURL(new Blob([res]));
console.log(url, "工作流圖片");
this.imgUrl = url;
});
},
打印得到：
由此，圖片可以正常顯示文章來源：http://www.zghlxwxcb.cn/news/detail-610116.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-610116.html
到了這里，關(guān)于Vue前端渲染blob二進制對象圖片的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
