Node.js读取图片路径转为base64，vue前端回显图片

注意：Node.js 中上传图片一般是上传到项目所在目录中 koa-static 指定的静态资源目录下，这样可以通过路径访问。这里讲的是上传的图片不在公共目录中的情况下，可以通过 fs 模块读取图片文件流，然后将图片文件流转为 base64，从而在前端通过 base64 把图片回显出来。

其实就是文件预览的操作

1. 从数据库中查询到文件的存放路径，然后使用 path.join() 拼接出绝对路径

const fs = require('fs')
const path = require('path')
// 假设 url 就是数据库中查询到的图片存放路径
const url = '\project\994fc9c9-1af1-4691-b27d-ccd926baeb91\image\1.png'
const dir = path.join(__dirname, '../', url) // 这里的 ../ 需要判断，如果当前这个js文件在项目根目录下，就不需要../

2. 使用 fs 模块读取该图片的文件流，并将图片的文件流转为 base64 格式

const readStream = fs.readFileSync(dir)  // 文件流
const base64 = readStream.toString('base64') // 转 base64

// 上面两行等价于下面的一行代码
const base64 = fs.readFileSync(dir, 'base64') // 文件流并转 base64

3. 将 base64 数据传送给前端

ctx.body = {
	code: 200,
	data: base64
}

4. 前端通过 ajax 接收数据

this.$http({
  method: 'get',
  url: ''
}).then (res => {
// 如果要显示图片的话需要在 base64 地址前 加上 'data:image/png;base64,'
    this.url = 'data:image/png;base64,' + res.data.data

5.将获取到的 base64格式的图片渲染到页面上

<img :src="url" alt=""></img>