Express实现前端后端通信上传图片之存储数据库（

【进阶教程】Express实现前端后端通信上传图片并存储至MySQL数据库（二）

亲爱的朋友们，如果你正在寻找如何将前端上传的图片存储至MySQL数据库的方法，那么本文将会为你提供详细的指导。

确保你的MySQL数据库已经安装并配置完成。如果你对安装和配置过程感到困惑，可以参考一些在线教程。这里提供一个简单的myi配置文件示例，你可以根据自己的安装路径进行修改：

[mysqld]

basedir="你的MySQL安装路径"

datadir="你的数据存放路径"

port = 3306

socket = "/tmp/mysql.sock"

[client]

password = （此处留空，若需设置密码）

port = 3306

socket = "/tmp/mysql.sock"

default-character-set = utf8

安装并启动MySQL服务后，你可以使用Navicat等可视化工具进行数据库管理，这样更加方便快捷。

接下来是第一次登陆数据库的步骤：

mysql -uroot -p

（输入上述命令后直接回车，若无设置密码则无需输入。）

在成功连接数据库后，我们可以开始使用Node.js进行数据库操作。推荐使用felixge/node-mysql这个纯Nodejs的MySQL客户端程序，它封装了Nodejs对MySQL的基本操作，并且是100% MIT公共许可证。

在Express应用中实现前端后端通信上传图片的功能，大致步骤如下：

1. 在前端使用HTML表单或者JavaScript库（如axios）进行图片上传操作。

2. 在后端使用Express接收前端上传的图片数据。

3. 使用node-mysql库连接MySQL数据库，并将图片数据存入数据库。

这里需要注意的是，我们通常将图片以二进制形式存储在数据库中，因此需要使用适当的方式处理图片数据。为了提高效率和安全性，也可以考虑将图片存储在文件服务器或云存储服务上，然后在数据库中保存图片的路径或URL。

以上只是简单的介绍和概述，具体实现过程会涉及到更多的细节和技术点。如果你对某个步骤有疑问或需要更详细的指导，请随时查阅相关文档和教程。

希望本文能为你提供有价值的信息和帮助，期待你在前端后端通信和MySQL数据库操作方面取得进步！项目地址：位于我们刚刚建立好的myapp文件夹内。接下来，我们将在这个项目中安装node-mysql模块，并通过运行npm install mysql命令来引入MySQL模块。完成安装后，我们可以开始进行下一步的测试工作。

为了测试我们的项目是否能成功连接MySQL数据库并执行查询操作，我们将参考官网的示例并进行相应的修改，将其应用到我们的项目中。修改内容主要涉及routes文件夹下的index.js文件，同时需要重启express服务器。

以下是修改后的index.js文件内容：

引入express和mysql模块，并创建一个express路由对象。

```javascript

var express = require('express');

var router = express.Router();

var mysql = require('mysql'); // 调用MySQL模块

```

接着，在路由的get方法里，我们设置路由为'/'，即项目的主页。在该方法中，我们首先渲染index视图，并设置标题为'孟星魂'。然后创建一个MySQL连接对象，连接参数包括主机地址、用户名、密码、端口和数据库名。连接成功后，我们执行一个简单的SQL查询语句，计算1+1的结果。查询结果将通过控制台输出。关闭数据库连接。

```javascript

router.get('/', function(req, res) {

res.render('index', { title: '孟星魂' });

var connection = mysql.createConnection({

host: '127.0.0.1', //主机

user: 'root', //MySQL认证用户名

password: '111', //MySQL认证用户密码

port: '3306', //端口号

database: 'nodesample'

});

connection.connect(function(err) {

if (err) {

console.log('[connection error] :' + err);

return;

}

console.log('[connection success]');

});

connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {

if (err) {

console.log('[query error] :' + err);

return;

}

console.log('The result is: ', rows[0].solution);

});

connection.end(function(err) {

if (err) {

return;

}

console.log('[connection closed]');

});

});

```

我们将修改后的路由对象导出，以便在其他文件中使用。至此，测试阶段的代码部分已经编写完成。接下来，我们需要在数据库中建立相应的测试数据表。下面是创建数据库的SQL语句：创建一个名为nodesample的数据库（如果它不存在），然后创建一个用户信息表（userinfo），包含主键Id、用户名（UserName）和用户密码（UserPass）字段。这些SQL语句可以直接在Navicat等工具中运行。测试成功后，恭喜您完成了项目的初步设置和数据库表的创建工作！接下来可以进行进一步的项目开发。接下来，我们将向数据库添加一条新数据。为此，我们需要修改`routes/index.js`文件，内容如下。

引入Express框架和MySQL模块，我们开始构建路由。

```javascript

var express = require('express');

var router = express.Router();

var mysql = require('mysql'); // 调用MySQL模块

router.get('/', function(req, res) {

res.render('index', {

title: '孟星魂'

});

// 建立与数据库的连接

var connection = mysql.createConnection({

host: '127.0.0.1', // 数据库主机

user: 'root', // MySQL用户名

password: '111', // MySQL密码

port: '3306', // 端口号

database: 'nodesample'

});

// 连接到数据库

connection.connect(function(err) {

if (err) {

console.log('[数据库连接] 错误: ' + err);

return;

}

console.log('[数据库连接成功]');

// 执行SQL语句，向数据库中添加用户信息

var userAddSql = 'INSERT INTO userinfo(Id, UserName, UserPass) VALUES(?, ?, ?)'; // 使用?作为参数占位符

var userAddSql_Params = ['Wilson', 'abcd']; // 这里传递的参数值将替换上面的?占位符

connection.query(userAddSql, userAddSql_Params, function(err, result) {

if (err) {

return;

}

});

});

// 结束数据库连接

connection.end(function(err) {

if (err) {

return; // 错误处理逻辑可以在这里添加

}

console.log('[数据库连接关闭]'); // 成功关闭数据库连接的信息输出。这里也可以进一步处理结果，比如记录日志等。 也可以考虑使用连接池管理数据库连接。 在Express中，我们可以使用中间件来管理路由和前后端的交互逻辑。关于路由的处理将在后续进行介绍。现在大家可以先掌握基本的数据库操作。至于图片存储到数据库的部分，我们会在后续详细讲解，其中包含一些需要注意的坑点和最佳实践。今天的内容就到这里，期待明天我们共同更精彩的部分！晚安！ 接下来是渲染页面的部分，使用`cambrian.render('body')`来渲染页面内容。具体的渲染逻辑和页面结构将在后续进行详细介绍。现在大家可以先掌握基本的框架和流程。晚安！晚安！晚安！愿你们有个美好的夜晚！明天我们再见！