前言
前端上傳圖片，傳到后端，然后后端直接把圖片以image形式存入數據庫，待前端請求時，再從數據庫中取出，傳給前端，邏輯上好像沒什么問題，但是在實際操作過程中，前端獲取到數據后並不能直接使用<img src=res.data/>來顯示圖片
解決辦法
- 在請求中，修改參數
responseType:"arraybuffer"
例如：
a. 使用axios進行修改，axios.get('http://xxxx.xxxx.xxx',{responseType:"arraybuffer"})
b. 使用xhr進行修改，xhr.responseType = 'arraybuffer' - 修改返回值
const blob = new Blob([responseData], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) - 引用
<img src={imageUrl}>
后續
最近又遇到了這個需求，使用上述方法，卻不行，但是相同的代碼，在另一個項目中卻沒有問題、這可快氣死我了，找問題找了好長時間。。。最后，終於發現，這個項目的框架使用了Mock攔截請求，其他方面沒問題，唯獨二進制這塊Mock貌似當時
沒有考慮到這種情況。網上搜“mock 二進制”，發現其他老哥也遇到過、（汗
解決
項目中Mock相關的全部注釋掉。