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

待我称王封你为后i 2023-01-22 15:55 268阅读 0赞

> 注意：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文件在项目根目录下，就不需要../

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

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

1.  将 base64 数据传送给前端

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

1.  前端通过 `ajax` 接收数据

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

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

![在这里插入图片描述][20210520184241531.png]

[20210520184241531.png]: /images/20221020/a4dbf1249bd441798ef10fb6e6806554.png