對于vue項目，我們使用axiso來發送請求，如果傳遞二進制圖片時出現亂碼，這個是什么問題？

答：
axios 默認返回的是 json 文本形式，二進制圖片數據被強制轉換成了 json 文本形式。

解決方案：
我們在 axios 里面，responseType 默認返回數據類型是 json，將其改為返回數據類型 blob。

export function miniprogramQrcode (params) {return axios.post(env.MI_URL + '/XXXX/XXX/XXXX',params,// 將responseType的默認json改為blob{responseType: 'blob',emulateJSON: true}).then(res => {if (res.data) {return Promise.resolve(res.data)} else {throw res}}).catch(err => {return Promise.reject(err)}) }

接下來，就是處理blob對象，將其顯示在前端頁面

createMiniQrcode (blob) {let img = document.createElement('img')img.onload = function (e) {// 元素的onload 事件觸發后將銷毀URL對象, 釋放內存。window.URL.revokeObjectURL(img.src)}// 瀏覽器允許使用URL.createObjectURL()方法，針對 Blob 對象生成一個臨時 URL。// 這個 URL 以blob://開頭,表明對應一個 Blob 對象。img.src = window.URL.createObjectURL(blob)document.querySelector('.imgQrCode').appendChild(img)}

圖片在后端的存儲方式有哪些？

答：
一般來說，圖片在后端的存儲方式分為兩種

（1）可以將圖片以獨立文件的形式存儲在服務器的指定文件夾中，再將路徑存入數據庫字段中;
（2）將圖片轉換成二進制流，直接存儲到數據庫的 Image 類型字段中.

對于第一種存儲方式，我們前端直接將存儲路徑賦值給 src 屬性即可輕松顯示。

對于第二種存儲方式，我們前端需要將其二進制流交由 blob 對象處理，然后通過 blob 的 API 生成臨時 URL 賦值給 src 屬性來顯示。

圖片的三種表現形式url、base64、blob，三者之間是否可以轉化？

答： 可以

1. url 轉 base64

// 原理： 利用canvas.toDataURL的API轉化成base64urlToBase64(url) {return new Promise ((resolve,reject) => {let image = new Image();image.onload = function() {let canvas = document.createElement('canvas');canvas.width = this.naturalWidth;canvas.height = this.naturalHeight;// 將圖片插入畫布并開始繪制canvas.getContext('2d').drawImage(image, 0, 0);// resultlet result = canvas.toDataURL('image/png')resolve(result);};// CORS 策略，會存在跨域問題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerrorimage.setAttribute("crossOrigin",'Anonymous');image.src = url;// 圖片加載失敗的錯誤處理image.onerror = () => {reject(new Error('圖片流異常'));};}

調用

let imgUrL = `http://XXX.jpg`this.getDataUri(imgUrL).then(res => {// 轉化后的base64圖片地址console.log('base64', res)})

2. base64 轉 blob

// 原理：利用URL.createObjectURL為blob對象創建臨時的URLbase64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {return new Promise((resolve, reject) => {// 使用 atob() 方法將數據解碼let byteCharacters = atob(b64data);let byteArrays = [];for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {let slice = byteCharacters.slice(offset, offset + sliceSize);let byteNumbers = [];for (let i = 0; i < slice.length; i++) {byteNumbers.push(slice.charCodeAt(i));}// 8 位無符號整數值的類型化數組。內容將初始化為 0。// 如果無法分配請求數目的字節，則將引發異常。byteArrays.push(new Uint8Array(byteNumbers));}let result = new Blob(byteArrays, {type: contentType})result = Object.assign(result,{// jartto: 這里一定要處理一下 URL.createObjectURLpreview: URL.createObjectURL(result),name: `圖片示例.png`});resolve(result)})}

調用

let base64 = base64.split(',')[1]this.base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {// 轉后后的blob對象console.log('blob', res)})

3. blob 轉 base64

// 原理：利用fileReader的readAsDataURL，將blob轉為base64 blobToBase64(blob) {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.onload = (e) => {resolve(e.target.result);};// readAsDataURLfileReader.readAsDataURL(blob);fileReader.onerror = () => {reject(new Error('文件流異常'));};});}

調用

this.blobToBase64(blob).then(res => {// 轉化后的base64console.log('base64', res)})

在互聯網環境中，大訪問量，數據庫速度和性能方面很重要。一般在數據庫存儲圖片的做法比較少，更多的是將圖片路徑存儲在數據庫中，展示圖片的時候只需要連接磁盤路徑把圖片載入進來即可。因為圖片是屬于大字段。一張圖片可能1m到幾m。這樣的大字段數據會加重數據庫的負擔，拖慢數據庫。在大并發訪問的情況下很重要。這是一個經驗。去看看dba對數據庫性能調優方面的分析都能得到這個答案的：就是圖片不要存儲在數據庫中。

總結

以上是生活随笔為你收集整理的url、base64、blob，三者之间的转化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。