天天看點

eggjs 怎麼實作傳回 base64 圖檔的接口給前端回顯頭像?

接着上一篇,我們這篇實作接口傳回 base64 給到前端去回顯頭像 ,昨天我們實作了把圖檔的唯一性資料存到了本地資料庫,下面實作一下讀取圖檔的邏輯:

  1. 前端通過唯一性資料發起請求
  2. 後端通過前端傳過來的唯一性資料找到伺服器檔案路徑
  3. 讀取檔案傳回 base64 資料
  4. 前端接收到服務端資料拿去用 img 标簽渲染
eggjs 怎麼實作傳回 base64 圖檔的接口給前端回顯頭像?

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 接收參數,點選運作,結果如下

eggjs 怎麼實作傳回 base64 圖檔的接口給前端回顯頭像?
{
  "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>      

繼續閱讀