Node.js+React+MySQL中Blob字段仅存44字节问题求助

你遇到的核心问题是：前端传入的LOAD_FILE('F:\React_Internships\of1.jpeg')被后端当作普通文本字符串插入到了image字段，而非让MySQL执行这个函数并返回图片二进制数据。直接在MySQL客户端执行时，数据库会解析并执行函数，所以能存储完整图片；但后端代码的参数绑定或转义逻辑，把函数语句转成了普通字符串，最终只保存了字符串本身的44字节内容。

方案一：修正后端SQL执行逻辑（不推荐，存在SQL注入风险） #

如果后端使用了参数化查询（如mysql2的预编译语句），参数会被自动转义成字符串，导致LOAD_FILE无法执行。若要让函数生效，需将其直接拼入SQL语句，但必须做严格的输入校验防止注入：

// 错误示例：参数绑定导致LOAD_FILE被当作字符串
// const query = 'INSERT INTO laps (name, gen, sir, hasGraphicCard, price, image) VALUES (?, ?, ?, ?, ?, ?)';
// connection.query(query, [name, gen, sir, hasGraphicCard, price, image], ...);

// 修正后：直接拼接LOAD_FILE语句，同时校验输入格式
const loadFilePattern = /^LOAD_FILE\('([a-zA-Z0-9:\\/_]+)'\)$/;
if (!loadFilePattern.test(image)) {
  return res.status(400).send('Invalid image path format');
}

const query = `INSERT INTO laps (name, gen, sir, hasGraphicCard, price, image) VALUES (?, ?, ?, ?, ?, ${image})`;
connection.query(query, [name, gen, sir, hasGraphicCard, price], (err, result) => {
  // 处理结果
});

⚠️ 注意：这种方式极易引发SQL注入攻击，仅在完全信任输入来源的场景下使用。

方案二：前端上传图片文件，后端插入二进制数据（推荐，安全通用） #

LOAD_FILE仅能读取MySQL服务器本地文件，前端传入的本地路径对服务器毫无意义，这本身就是不合理的设计。正确的做法是前端直接上传图片文件，后端接收二进制数据后插入数据库：

1. 前端修改表单（CreateLaptop.jsx） #

改用file类型输入框选择图片，通过FormData提交：

<form onSubmit={handleSubmit} encType="multipart/form-data">
  <input type="text" name="name" placeholder="Name" required />
  <input type="text" name="gen" placeholder="Gen" required />
  <input type="text" name="sir" placeholder="Sir" required />
  <input type="checkbox" name="hasGraphicCard" /> 有显卡
  <input type="number" name="price" placeholder="Price" required />
  <input type="file" name="image" accept="image/*" required />
  <button type="submit">添加笔记本</button>
</form>

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  fetch('/api/create-laptop', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => console.log('提交成功', data))
  .catch(err => console.error('提交失败', err));
};

2. 后端处理上传（server.js） #

使用multer中间件接收文件，读取二进制数据后插入数据库：

const express = require('express');
const multer = require('multer');
const mysql = require('mysql2/promise');
const app = express();

// 配置multer，将文件存储在内存中
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 处理上传请求
app.post('/api/create-laptop', upload.single('image'), async (req, res) => {
  try {
    // 解析表单字段
    const { name, gen, sir, hasGraphicCard, price } = req.body;
    // 获取图片二进制数据
    const imageBuffer = req.file.buffer;

    // 连接数据库
    const connection = await mysql.createConnection({
      host: '你的数据库地址',
      user: '用户名',
      password: '密码',
      database: '数据库名'
    });

    // 执行插入语句
    const insertQuery = `
      INSERT INTO laps (name, gen, sir, hasGraphicCard, price, image)
      VALUES (?, ?, ?, ?, ?, ?)
    `;
    await connection.execute(insertQuery, [
      name,
      gen,
      sir,
      hasGraphicCard === 'on', // 处理复选框值
      parseFloat(price),
      imageBuffer
    ]);

    await connection.end();
    res.json({ success: true, message: '笔记本添加成功' });
  } catch (err) {
    console.error('插入失败:', err);
    res.status(500).json({ success: false, error: err.message });
  }
});

app.listen(3001, () => console.log('服务器运行在3001端口'));

这种方式既避免了SQL注入，又不依赖服务器本地文件路径，是通用的图片存储方案。

方案三：若必须使用LOAD_FILE（仅限图片在MySQL服务器本地的场景） #

除了方案一的代码修正，还需确保：

• MySQL的secure_file_priv参数允许读取目标路径（执行SHOW VARIABLES LIKE 'secure_file_priv';查看，若值为NULL需在my.cnf中配置允许的路径）
• 图片文件的权限允许MySQL进程读取

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