如何上传Base64编码图片至MySQL？解决大图片存储报错问题

在Vue.js应用中将图片编码为Base64后，通过feathers.js + feathers-objection保存到MySQL数据库，表中uri字段定义为LONGTEXT类型，小图片存储正常，但大于1MB的图片会触发mysql2驱动的「Data too long for column」错误。因场景限制无法采用Feathers官方推荐的对象存储方案（如谷歌云盘）。当前通过knex.js定义的表结构如下：

exports.up = function (knex) {
  return knex.schema
    .createTable("attachments", (table) => {
      table.increments("id");
      table.integer("ticketId");
      table.text("uri", "LONGTEXT");
      table.integer("size");
      table.string("type");
      table.string("name");
      table.timestamp("createdAt").nullable();
      table.timestamp("updatedAt").nullable();
    })
    .then(() => console.log("Created attachments table")) // eslint-disable-line no-console
    .catch((e) => console.error("Error creating attachments table", e)); // eslint-disable-line no-console
};

请问是否有其他可行方案，比如支持更长Base64编码URI的数据类型？

1. 先排查字段类型是否实际生效 #

MySQL的LONGTEXT最大可存储4GB数据，Base64编码后的1MB原文件仅约1.33MB，完全在LONGTEXT的容量范围内。报错大概率是字段未实际创建为LONGTEXT：

• Knex中table.text("uri", "LONGTEXT")的写法可能存在兼容性问题，部分Knex版本需要用专属的longtext方法定义字段：

  // 修改表结构中的uri字段定义
  table.longtext("uri");
  

• 执行DESCRIBE attachments;查询数据库，确认uri字段的实际类型是否为LONGTEXT。如果是TEXT（默认仅64KB），就会导致大文件存储失败。

2. 改用二进制字段存储（更高效） #

Base64编码会让文件体积增加33%，推荐直接存储二进制数据，既节省空间又避免编码/解码开销：

• 修改Knex表结构，将uri字段替换为LONGBLOB类型（最大4GB）：

  table.longblob("file_data"); // 替换原有的table.text("uri", "LONGTEXT")
  

• 前端不再转Base64，改用FormData上传文件：

  // Vue中上传文件的示例
  const formData = new FormData();
  formData.append("file", file);
  formData.append("ticketId", ticketId);
  // 其他字段如name、type等也加入FormData
  
  // 调用Feathers服务接口
  await this.$feathers.service("attachments").create(formData);
  

• Feathers服务中处理FormData，将文件转为Buffer存入数据库：

  // attachments服务的create钩子示例
  hooks.before({
    async create(context) {
      const { file, ticketId, name, type } = context.data;
      // 将文件转为Buffer
      const fileBuffer = await file.toBuffer();
      // 替换context.data为数据库需要的格式
      context.data = {
        ticketId,
        file_data: fileBuffer,
        size: file.size,
        type,
        name,
        createdAt: new Date(),
        updatedAt: new Date()
      };
      return context;
    }
  });
  

3. 调整MySQL的max_allowed_packet配置 #

如果字段类型已正确设置为LONGTEXT/LONGBLOB仍报错，需检查MySQL的数据包大小限制：

• 查看当前配置：SHOW VARIABLES LIKE 'max_allowed_packet';
• 如果值过小（比如默认4MB），修改MySQL配置文件（my.cnf/my.ini）：

  [mysqld]
  max_allowed_packet=64M
  

• 重启MySQL服务后生效。

内容的提问来源于stack exchange，提问作者ix.trc