JavaScript中不通过File Input实现图片转varbinary的方法

核心结论 #

不需要额外安装冗余npm包，依靠Node.js原生Buffer能力 + mssql驱动自带的类型映射，就可以完成转换和入库，全程不需要手动拼接0x开头的字符串，也不需要把截图存到本地磁盘再读取。

具体实现步骤 #

1. 直接从Puppeteer获取图片二进制Buffer #

Puppeteer的screenshot方法如果不传入path配置项，会直接返回图片的二进制Buffer对象，不需要落盘操作：

const puppeteer = require('puppeteer');
const sql = require('mssql');

// 启动浏览器截图
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('你要截图的目标页面地址', { waitUntil: 'networkidle2' });
// 直接获取jpeg格式的图片二进制数据，quality参数可按需调整画质
const imgBuffer = await page.screenshot({
  type: 'jpeg',
  quality: 80
});
await browser.close();

2. 通过mssql参数化查询直接入库 #

不要手动把Buffer转成0x开头的字符串拼接SQL语句，这种方式容易出现编码损坏、数据截断问题，还存在SQL注入风险。mssql驱动原生支持Buffer类型到VarBinary的自动映射，直接传参即可

// 初始化数据库连接
await sql.connect({
  user: '你的数据库账号',
  password: '你的数据库密码',
  server: '你的数据库服务地址',
  database: '目标库名',
  options: {
    encrypt: true,
    trustServerCertificate: true
  }
});

// 写法1：使用模板标签参数化查询
// 图片体积较大时指定sql.MAX，避免8000字节长度限制截断数据
await sql.query`
  INSERT INTO 你的业务表 (image_column, other_column)
  VALUES (${sql.VarBinary(sql.MAX, imgBuffer)}, '其他业务字段值')
`;

// 写法2：使用request.input传参，兼容性更好
const request = new sql.Request();
request.input('uploadImg', sql.VarBinary(sql.MAX), imgBuffer);
await request.query(`INSERT INTO 你的业务表 (image_column) VALUES (@uploadImg)`);

特殊场景：手动生成0x开头的VarBinary格式字符串 #

如果遇到必须拼接SQL的特殊场景，直接用Buffer原生方法转十六进制字符串即可，不需要第三方包：

// 生成和示例格式一致的0x开头VarBinary字符串
const varBinaryStr = '0x' + imgBuffer.toString('hex');
// 输出结果格式为0x78DAC...，可直接匹配格式要求

可选npm包说明 #

• 基础转换、入库场景：不需要安装任何额外npm包，Node.js原生API和mssql、puppeteer的自带能力已经完全覆盖需求
• 如果需要在入库前做图片压缩、裁剪、水印添加等处理，可以使用sharp包，处理完成后输出的依然是Buffer类型，直接按上述逻辑传参即可，不需要额外做格式转换

踩坑提示：禁止对图片二进制Buffer使用toString('utf8')/toString('base64')等编码转换后直接入库，会破坏二进制数据结构，导致存进去的文件损坏无法打开。

内容的提问来源于stack exchange，提问作者Renato C.Francisco