Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）

OK，这里是 “Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）”的完整攻略：

攻略概览

本攻略主要介绍如何使用 Express 实现前后端之间的图片上传，以及如何将上传的图片存储到 MySQL 数据库中。攻略包含以下主要内容：

前端页面的开发，包括上传图片的界面和相应的 JS 代码；
Express 后端的开发，包括上传图片的路由和保存图片到 MySQL 数据库的代码；

下面详细介绍这些内容。

前端页面的开发

1. HTML 页面

首先，我们需要一个 HTML 页面作为上传图片的入口。下面是一份模板代码，你可以根据需要进行相应的修改：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Upload Image to MySQL</title>
</head>
<body>
    <h1>Upload Image to MySQL</h1>
    <form enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">Upload</button>
    </form>
</body>
</html>

在这段代码中，我们使用了一个 form 标签来包裹一个文件上传的 input 标签。这里需要注意的是，form 标签的 enctype 属性必须设置为 multipart/form-data，否则无法上传二进制文件。

2. JS 代码

接下来，我们需要一份上传图片的 JS 代码。下面是一份示例代码，你可以根据需要进行相应的修改：

const uploadButton = document.querySelector('button[type="submit"]')
uploadButton.addEventListener('click', (event) => {
    event.preventDefault()
    const formData = new FormData()
    const fileInput = document.querySelector('input[type="file"]')
    formData.append('file', fileInput.files[0])
    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(result => {
        alert(result)
    })
})

在这段代码中，我们首先为上传按钮添加了一个 click 事件监听器。当用户点击上传按钮时，我们先通过 FormData 实例对象构造了一个包含上传文件信息的表单数据，然后使用 fetch API 发送一个 POST 请求到 /upload 路由。最后，我们使用 alert 方法显示上传结果。

Express 后端的开发

1. 安装依赖

首先，我们需要安装必要的依赖。在命令行中输入以下命令：

$ npm install express multer mysql2

其中，express 是 Express 的核心依赖，multer 是一个 Node.js 中间件，用于处理 multipart/form-data 类型的数据，mysql2 是 MySQL 数据库的 Node.js 驱动程序。

2. 服务器代码

完成依赖安装后，我们开始编写服务器代码。下面是一份示例代码，你可以根据需要进行相应的修改：

const express = require('express')
const multer = require('multer')
const mysql = require('mysql2')

// 创建数据库连接
const connection = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'database'
})

// 创建 Express 应用实例
const app = express()

// 创建上传中间件
const upload = multer({
    dest: 'uploads/' // 上传文件的存储目录
})

// 处理上传请求
app.post('/upload', upload.single('file'), (req, res, next) => {
    // 获取上传文件的信息
    const { originalname, mimetype, filename, path } = req.file
    // 将文件信息保存到 MySQL 数据库
    connection.query(
        'INSERT INTO `images` (`filename`, `mimetype`, `originalname`, `path`) VALUES (?, ?, ?, ?)',
        [filename, mimetype, originalname, path],
        (error, result) => {
            if (error) {
                next(error)
            } else {
                res.send('Upload success!')
            }
        }
    )
})

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000')
})

在这段代码中，我们首先创建了一个 MySQL 数据库连接池。然后，我们创建了一个 Express 应用实例，使用 multer 中间件来处理上传请求，并将上传文件信息保存到 MySQL 数据库。最后，我们监听了 3000 端口并启动了服务器。

示例说明

示例一：上传成功

当用户选择了需要上传的图片文件后，点击上传按钮，服务器将会将图片文件保存到指定的文件目录下，并将文件信息存储到数据库中。这时，浏览器将会弹出一个提示框，显示上传成功。

示例二：上传失败

当用户上传的图片文件大小超过了预期的大小，或者上传过程中出现网络错误等问题时，服务器将不会接受上传请求，并将会返回一个相应的错误信息。此时，浏览器将不会弹出提示框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一） - Python技术站