2020 年 11 月 16 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

axios 跨域(CORS)取得 spring boot 的圖片並顯示於 vue 前端網頁

1 min read
base64-img-render-in-vue

axios 跨域 ( CORS ) 取得 spring boot 的圖片並顯示於 vue 前端

 

Spring boot 對於 axios 在 cors 與 csrf 的整合配置(總結) 應該瞭解如何跨域來解決資料取得的問題,至於 Axios 跨域取得的圖片要如何顯示在前端,下面就來實作看看。

 

  1. 在 spring boot 中撰寫取得圖片,記得要對它作 Base64 的編碼
/**
 * 供給 CORS 跨域的前端圖片顯示時需先用Base64加碼, 前端再用 <img :src="'data:image/jpeg;base64,'+userAvatar"> 顯示圖片
 * @param imageType
 * @param filename
 * @return
 * @throws Exception
 */
@RequestMapping(value = "/auth/showpic/{imageType}/{filename}")
public ResponseEntity<byte[]> showPic( @PathVariable String imageType, @PathVariable String filename ) throws Exception {
   
 Resource imgFile = resourceLoader.getResource("file:" + rootPath + "/fileUpload/" + imageType +"/"+ filename);

 byte[] bytes = StreamUtils.copyToByteArray(imgFile.getInputStream());
 byte[] encodedBytes = Base64.getEncoder().encode(bytes);
 return ResponseEntity
   .ok()
   .body(encodedBytes);
 
}

 

  1. 在前端使用 axios 向 spring boot 送一個取得圖片的要求
axios.get('/auth/showpic/avatar/admin.png').then({res=>this.userAvatar=res.data})

 

  1. 然後使用 vue 的語法,在 src 中的 url 要使用 'data:image/jpeg;base64,'+圖片名, 這樣就可以顯示圖片了
<img :src="'data:image/jpeg;base64,'+userAvatar">

 

base64-img-render-in-vue

 

Copyright © All rights reserved. | Newsphere by AF themes.