如何从Node.js表单上传文件作为Blob存入MySQL数据库？

1. 修改HTML表单 #

表单必须添加enctype="multipart/form-data"属性，否则无法传输文件内容，只能拿到文件名：

<form action="/addPage" method="POST" enctype="multipart/form-data">
<h3>Add Page:</h3>
<p>Give icon: <input name='plik' type="file"/></p>
<p>Link: <input name='link' type="text"/></p>
<p>Title: <input name='tytul' type="text"/></p>
<p>Opis: <input name='opis' type='text'/></p>
<p><input type="submit"/></p>
</form>

2. 配置Node.js的文件上传中间件 #

使用multer中间件处理multipart格式的请求（先执行npm install multer安装依赖）：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer使用内存存储（适合图标这类小文件），也可根据需求改为磁盘存储
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 在/addPage路由上应用中间件，指定处理名为plik的文件字段
app.post('/addPage', upload.single('plik'), async (req, res) => {
  try {
    // req.file.buffer就是文件的二进制内容（Buffer类型）
    const fileBuffer = req.file?.buffer;
    const link = req.body.link;
    const tytul = req.body.tytul;
    const opis = req.body.opis;

    if (!fileBuffer) {
      return res.status(400).send('请选择要上传的图标文件');
    }

    // 直接传入Buffer，mysql2会自动转换为Blob类型插入数据库
    const [re] = await global.db.query(
      'INSERT INTO sites (icon, link, tytul, opis) VALUES (?, ?, ?, ?);',
      [fileBuffer, link, tytul, opis]
    );

    res.send('数据插入成功');
  } catch (err) {
    console.error(err);
    res.status(500).send('插入失败');
  }
});

3. 关键说明 #

• 确保MySQL表中icon字段类型为BLOB（或MEDIUMBLOB/LONGBLOB，根据文件大小选择）
• 之前使用的LOAD_FILE()函数是读取MySQL服务器本地文件的，和客户端上传的文件无关，这是导致icon字段为null的核心原因
• 如果上传文件较大，建议改用multer的磁盘存储模式，再读取文件Buffer存入数据库，避免内存占用过高

内容的提问来源于stack exchange，提问作者Mistermakos