接着上一篇，我們這篇實作接口傳回 base64 給到前端去回顯頭像 ，昨天我們實作了把圖檔的唯一性資料存到了本地資料庫，下面實作一下讀取圖檔的邏輯：
- 前端通過唯一性資料發起請求
- 後端通過前端傳過來的唯一性資料找到伺服器檔案路徑
- 讀取檔案傳回 base64 資料
- 前端接收到服務端資料拿去用 img 标簽渲染
1、建立路由
// 擷取頭像
router.get('/api/upload/getAvatar', verify_token, controller.upload.getAvatar); 2、編寫生成 base64 邏輯
我們在 upload.js 裡面添加下面方法
async getAvatar () {
const { ctx, config } = this;
try {
// 0、擷取圖檔名稱
let picname = ctx.request.body.picname;
console.log('0、擷取圖檔名稱', picname);
// 1、判斷
if(!picname) {
ctx.body = {
status: 400,
desc: 'picname 參數必傳',
data: null
}
return;
}
// 拼接圖檔儲存的路徑
let dir = path.join(config.uploadAvatarDir, [picname.split("_")[0], picname].join("/"));
console.log('1、拼接圖檔儲存的路徑', dir);
// 字首
let prefix = "data:" + path.extname(picname).slice(1) + ";base64,"
// 讀取檔案 轉成 base64
let base64 = fs.readFileSync(dir, 'base64');
console.log(prefix);
ctx.body = {
status: 200,
desc: '擷取成功',
data: prefix + base64
};
} catch(error) {
ctx.body = {
status: 500,
desc: '擷取失敗',
data: null
};
}
} 3、測試接口
我們假如已經接收到前端傳的參數，通過 picname 接收參數，點選運作，結果如下
{
"status": 200,
"desc": "擷取成功",
"data": "data:png;base64,iVBORw0KGgoAAAANSUhEUgAAB24AAAObCAYAAACb16FPAAAgAElEQV...."
} 4、前端頁面回顯
寫法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頭像回顯</title>
</head>
<body>
<img src="data:png;base64,iVBORw0KGgoAAAANSUhEUgAAB24AAAObCAYAAACb16FPAAAgAElEQV...." alt="">
</body>
</html>