前端传来的图片并保存_前端处理后端接口传递过来的图片文件
背景
在之前，從來都是后端返一個圖片地址，然后前端直接使用。 那如果后端返了一個圖片文件過來，那要怎么做？
參考：
vue axios請求圖片流文件前端頁面顯示處理方法
background url base64
js動態創建樣式: style 和 link
正文
這次我接收到的直接是一個圖片文件，然后亂碼了。。 如下圖
要怎么處理呢？
首先是第一步，請求處理，下面我分別列出了axios、fetch、jq、原生js的處理方式
1.修改請求
1.1. axios
重點在于添加option: responseType: 'arraybuffer'
let url = `imgurl`;
axios.get(url,{responseType: 'arraybuffer'}).then(function(data){
console.log(data);
}).catch(function(err){
error(err)
});
復制代碼
1.2. fetch
我們在使用fetch的時候，會有一個response的對象處理過程。 普遍我們都是使用的 response.json(),但這次我們需要進行response.arrayBuffer()處理
fetch(url)
.then(function(response){
if(response.ok) {
return response.arrayBuffer(); // 這一行是關鍵
}
throw new Error('Network response was not ok.');
})
.then(function(data){
console.log(data)
})
.catch(function(error){
});
復制代碼
1.3. JQ-ajax
如果使用jq封裝的ajax，那么抱歉，這個功能用不了。
jq封裝的ajax是基于xhr第一版本的，而ArrayBuffer是基于xhr第二版本的
這種情況就推薦使用原生js來寫
1.4. 原生js
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer'; // 重點
let that = this; // 這個不是必須，只是用來保存this的指向
xhr.onload = function(e){
if (this.status == 200) {
let result = this.response;
console.log(result)
}
};
xhr.send();
復制代碼
補充知識點
responseType設置的是啥？ arraybuffer又是啥？
這些內容估計又可以開一篇文章來寫了，詳細的可以參考以下網址：
MDN-XMLHttpRequest.responseType
阮一峰-二進制數組
2.處理返回值
好了，我們現在已經獲取到了我們需要的二進制數組(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的指代，就看看最上面的那個圖
復制代碼
這樣能將圖片進行編碼，然后做前端緩存(如果用localStorage緩存blob，存能成功，但是刷新后再取出來是看不見圖片的)。
解釋一下各自含義：
data: ----獲取數據類型名稱
image/png; -----指數據類型名稱
base64 -----指編碼模式
AAAAA ------指編碼以后的結果。
3.使用
2種方法：
如果使用vue這類框架，可以直接style賦值
創建動態style，創建動態css
第一個這個使用就不說了，直接src=imgUrl;
//vue
"imgUrl">
復制代碼
第二個我們要做的就是創建style節點，并添加在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);
}
復制代碼
這樣，就動態創建了相應的style樣式。 然后給需要的地方添加上 .img 即可
...
...
div
...復制代碼
總結
以上是生活随笔為你收集整理的前端传来的图片并保存_前端处理后端接口传递过来的图片文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 链家网页爬虫_分享最近做的一个链家二手房
- 下一篇： 用HTML5技术打造跨平台大型网游