背景

在之前，從來(lái)都是后端返一個(gè)圖片地址，然后前端直接使用。 那如果后端返了一個(gè)圖片文件過(guò)來(lái)，那要怎么做？

參考：

vue axios請(qǐng)求圖片流文件前端頁(yè)面顯示處理方法

background url base64

js動(dòng)態(tài)創(chuàng)建樣式: style 和 link

正文

這次我接收到的直接是一個(gè)圖片文件，然后亂碼了。。 如下圖

要怎么處理呢？

首先是第一步，請(qǐng)求處理，下面我分別列出了axios、fetch、jq、原生js的處理方式

1.修改請(qǐng)求

1.1. axios

重點(diǎn)在于添加option: responseType: 'arraybuffer'

let url = `imgurl`;

axios.get(url,{responseType: 'arraybuffer'}).then(function(data){

console.log(data);

}).catch(function(err){

error(err)

});

復(fù)制代碼

1.2. fetch

我們?cè)谑褂胒etch的時(shí)候，會(huì)有一個(gè)response的對(duì)象處理過(guò)程。 普遍我們都是使用的 response.json(),但這次我們需要進(jìn)行response.arrayBuffer()處理

fetch(url)

.then(function(response){

if(response.ok) {

return response.arrayBuffer(); // 這一行是關(guān)鍵

}

throw new Error('Network response was not ok.');

})

.then(function(data){

console.log(data)

})

.catch(function(error){

});

復(fù)制代碼

1.3. JQ-ajax

如果使用jq封裝的ajax，那么抱歉，這個(gè)功能用不了。

jq封裝的ajax是基于xhr第一版本的，而ArrayBuffer是基于xhr第二版本的

這種情況就推薦使用原生js來(lái)寫(xiě)

1.4. 原生js

let xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'arraybuffer'; // 重點(diǎn)

let that = this; // 這個(gè)不是必須，只是用來(lái)保存this的指向

xhr.onload = function(e){

if (this.status == 200) {

let result = this.response;

console.log(result)

}

};

xhr.send();

復(fù)制代碼

補(bǔ)充知識(shí)點(diǎn)

responseType設(shè)置的是啥？ arraybuffer又是啥？

這些內(nèi)容估計(jì)又可以開(kāi)一篇文章來(lái)寫(xiě)了，詳細(xì)的可以參考以下網(wǎng)址：

MDN-XMLHttpRequest.responseType

阮一峰-二進(jìn)制數(shù)組

2.處理返回值

好了，我們現(xiàn)在已經(jīng)獲取到了我們需要的二進(jìn)制數(shù)組(arrayBuffer) 下一步，我們要把圖片顯示處理，使用base64編碼即可

let imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))

// 這里如果不清楚 new Uint8Array(data.data) 中data的指代，就看看最上面的那個(gè)圖

復(fù)制代碼

這樣能將圖片進(jìn)行編碼，然后做前端緩存(如果用localStorage緩存blob，存能成功，但是刷新后再取出來(lái)是看不見(jiàn)圖片的)。

解釋一下各自含義：

data: ----獲取數(shù)據(jù)類(lèi)型名稱(chēng)

image/png; -----指數(shù)據(jù)類(lèi)型名稱(chēng)

base64 -----指編碼模式

AAAAA ------指編碼以后的結(jié)果。

3.使用

2種方法：

如果使用vue這類(lèi)框架，可以直接style賦值

創(chuàng)建動(dòng)態(tài)style，創(chuàng)建動(dòng)態(tài)css

第一個(gè)這個(gè)使用就不說(shuō)了，直接src=imgUrl;

//vue

"imgUrl">

復(fù)制代碼

第二個(gè)我們要做的就是創(chuàng)建style節(jié)點(diǎn)，并添加在head種

if(document.all){ // document.createStyleSheet(url)

window.style=`.imga{background-img: url(${imgUrl});`;

document.createStyleSheet("javascript:style");

}else{ //document.createElement(style)

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML=`.imga{background-img: url(${imgUrl});`;

document.getElementsByTagName('HEAD').item(0).appendChild(style);

}

復(fù)制代碼

這樣，就動(dòng)態(tài)創(chuàng)建了相應(yīng)的style樣式。 然后給需要的地方添加上 .img 即可

...

...

div

...復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的前端传来的图片并保存_前端处理后端接口传递过来的图片文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。