如何在TypeScript中处理并存储图片二进制数据至MySQL

我正在开发一款应用，允许用户从手机图库上传图片作为头像，所有数据存储于MySQL数据库中。我创建了以email为键、profilepic为最大长度LargeBLOB类型的表。

在Swift应用中，我已通过以下代码将图片转换为二进制数据：

let imageData = image.pngData()
let strBase64 = imageData!.base64EncodedString(options: .lineLength64Characters)

现在需要通过TypeScript编写的后端处理该数据，我打算沿用处理其他字符串数据的类似结构，代码如下：

const saveData = async function saveData(email: string, data: string): Promise<null> {
    return new Promise<null>(((resolve, reject) => {
        const query = "INSERT INTO Data SET ?"

        const insertData = {
            email: email,
            data: data
        }

        connection.query(query, insertData, (err: MysqlError | null, result: OkPacket | null) => {
            if (err != null) {
                reject(err.message); return;
            }

            if (result != null) {
                if (result.affectedRows == 1) {
                    resolve(null); return;
                } else {
                    reject('Unknown error 1 saving data to database.'); return
                }
            } else {
                reject('Unknown error 2 saving data to database.'); return
            }
        });
    }));
};

目前的问题是，我不知道该用什么数据类型替代原代码中data参数的string类型，请问该如何处理这类图片数据？

1. 参数类型无需替换，仍用string #

你在Swift端生成的是Base64编码的字符串，后端saveData函数的data参数类型保持string完全没问题——因为前端传递过来的就是这个字符串格式的数据。

2. 存入数据库前转成Buffer类型 #

MySQL的LargeBLOB字段需要二进制数据，Node.js/TypeScript中对应的数据类型是Buffer。你需要把接收到的Base64字符串转换成Buffer再存入数据库，同时注意和数据库字段名对应：

const saveData = async function saveData(email: string, data: string): Promise<null> {
    return new Promise<null>(((resolve, reject) => {
        const query = "INSERT INTO Data SET ?"
        // 将Base64字符串转换为Buffer
        const imageBuffer = Buffer.from(data, 'base64');

        const insertData = {
            email: email,
            profilepic: imageBuffer // 对应数据库表的字段名profilepic
        }

        connection.query(query, insertData, (err: MysqlError | null, result: OkPacket | null) => {
            if (err != null) {
                reject(err.message); return;
            }

            if (result != null) {
                if (result.affectedRows == 1) {
                    resolve(null); return;
                } else {
                    reject('Unknown error 1 saving data to database.'); return
                }
            } else {
                reject('Unknown error 2 saving data to database.'); return
            }
        });
    }));
};

3. 额外注意事项 #

• 如果Swift端的Base64字符串带有前缀（比如data:image/png;base64,），需要先截取前缀再转Buffer：

  const base64Content = data.replace(/^data:image\/\w+;base64,/, '');
  const imageBuffer = Buffer.from(base64Content, 'base64');
  

• 必须保证insertData中的键名和数据库表的字段名完全一致（你的表字段是profilepic，不要用示例中的data），否则会导致插入失败。

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