spring Boot后端與vue3前端圖片傳輸及Blob轉換疑難解答
本文分析一個實際案例：開發者使用spring boot 3.2.2 (Java 21)后端和vue3前端，在圖片傳輸過程中遇到Blob轉換失敗的問題。后端能正常返回圖片，但前端接收后轉換為Blob后大小為0，導致圖片無法顯示。
問題描述:
后端使用FileInputStream讀取圖片并返回byte[]：
public byte[] getimages(String url) throws IOException { try (FileInputStream inputstream = new FileInputStream(new File(filepath + url))) { byte[] bytes = new byte[inputstream.available()]; inputstream.read(bytes, 0, inputstream.available()); return bytes; } }
前端使用axios發送請求，嘗試將響應轉換為Blob：
const config = { headers: { Authorization: `Bearer ${this.$store.getters.getToken}`, responseType: "arraybuffer", accept: "image/jpeg", }, }; axios.get(`/images/avatars/${this.$store.getters.getAvatar}`, config) .then((response) => { const uint8Array = new Uint8Array(response.data); const blob = new Blob([response.data], { type: "image/jpeg" }); const url = window.URL.createObjectURL(blob); this.avatarURL = url; });
盡管數據看似已接收，但生成的Blob大小為0。
解決方案與分析:
開發者發現直接將圖片URL賦值給標簽的src屬性可以正常顯示圖片，繞過了Blob轉換步驟。這暗示了問題可能出在數據類型轉換或請求配置上。
進一步排查發現，response.data的類型是字符串(string)，而非預期的ArrayBuffer或byte[]。這很可能與responseType: “arraybuffer”設置未能生效有關，導致后端返回的二進制數據被瀏覽器自動解析為字符串。
潛在原因:
-
responseType設置無效: 服務器端可能未正確設置響應頭，導致responseType設置被忽略。 需要檢查后端是否正確設置了Content-Type為image/jpeg等圖片類型。
-
數據類型不匹配: 后端返回byte[]，但前端期望ArrayBuffer。雖然Uint8Array可以處理byte[]，但如果response.data是字符串，則會造成數據類型不匹配，導致Blob創建失敗。
-
字符編碼問題: 在某些情況下，字符編碼問題可能導致二進制數據被錯誤地解釋為字符串。
-
Spring Boot配置: Spring Boot的配置也可能影響響應數據的處理。
改進建議:
-
后端調整: 后端應直接返回InputStream或使用更合適的響應方式，例如使用ResponseEntity
返回Resource對象，避免手動處理byte[]。 -
前端調整: 前端應檢查response.data的類型，并根據實際類型進行處理?？梢允褂胕nstanceof操作符或typeof操作符進行類型判斷。 若response.data為字符串，則需要找到導致二進制數據被解釋為字符串的原因。
通過以上分析和建議，開發者可以更有效地排查問題，并最終實現圖片的正確傳輸和顯示。 直接使用圖片URL雖然解決了問題，但理解根本原因才能避免類似問題再次發生。
