开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

mysql添加时实现上传图片

基础概念

MySQL是一种关系型数据库管理系统，用于存储和管理数据。在MySQL中添加数据通常涉及到向表中插入记录。上传图片并将其存储在数据库中通常涉及到以下几个步骤：

客户端上传图片：用户通过前端页面上传图片。
服务器接收图片：后端服务器接收图片并保存到服务器本地或云存储服务。
数据库记录：将图片的路径或其他相关信息存储到MySQL数据库中。

相关优势

数据持久化：将图片信息存储在数据库中，可以方便地进行数据备份和恢复。
便于管理：通过数据库可以方便地管理和查询图片信息。
灵活性：可以根据需要随时更改图片的存储位置或路径。

类型

直接存储图片二进制数据：将图片的二进制数据直接存储在数据库的BLOB（Binary Large Object）字段中。
存储图片路径：将图片存储在文件系统中，数据库中仅存储图片的路径。

应用场景

用户头像：用户上传头像并存储在数据库中。
产品图片：电商网站中产品的图片存储。
新闻配图：新闻网站中新闻文章的配图存储。

实现上传图片的步骤

前端部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Image</title>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="image" id="image">
        <button type="submit">Upload</button>
    </form>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(this);
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

后端部分（Node.js + Express）

const express = require('express');
const multer = require('multer');
const mysql = require('mysql');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'testdb'
});

db.connect(err => {
    if (err) throw err;
    console.log('Connected to MySQL database');
});

app.post('/upload', upload.single('image'), (req, res) => {
    const imagePath = req.file.path;
    const imageName = req.file.filename;

    const sql = 'INSERT INTO images (name, path) VALUES (?, ?)';
    db.query(sql, [imageName, imagePath], (err, result) => {
        if (err) return res.status(500).send(err);
        res.json({ message: 'Image uploaded successfully', id: result.insertId });
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

数据库表结构

CREATE TABLE images (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    path VARCHAR(255) NOT NULL
);

可能遇到的问题及解决方法

图片上传失败：
- 原因：可能是前端表单未正确设置enctype="multipart/form-data"，或者后端未正确配置multer。
- 解决方法：确保前端表单设置了enctype="multipart/form-data"，后端正确配置multer。

数据库插入失败：
- 原因：可能是数据库连接问题或SQL语句错误。
- 解决方法：检查数据库连接配置，确保SQL语句正确无误。
图片路径错误：
- 原因：可能是图片保存路径配置错误。
- 解决方法：检查multer的dest配置，确保路径正确。

参考链接

通过以上步骤和代码示例，你可以实现一个基本的图片上传功能，并将图片信息存储到MySQL数据库中。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

42. Django 2.1.7 上传图片 - Admin后台管理

5）在static目录下创建media目录，再创建应用名称的目录，此例为assetinfo。

02

Django 2.1.7 上传图片 - Admin后台管理

Django 2.1.7 Admin管理后台 - 注册模型、自定义显示列表字段 Django 2.1.7 Admin - 列表页选项 Django 2.1.7 Admin - 编辑页选项 Django 2.1.7 Admin - 重写模板，自定义后台

03

项目之创建静态资源和设置子模块项目、开发简易上传功能(11)

在一个项目中，如果某些依赖只是部分子模块项目需要使用的，应该将这些依赖配置在<dependencyManagement>节点中，凡配置在这个节点中的依赖，任何子模块项目中都不会直接拥有，如果某个子模块项目需要使用这些依赖，依然需要使用<dependency>节点来添加！与在子模块项目中直接添加<denpendency>（父级的<dependencyManagement>没有配置某个依赖而子模块项目中直接添加）的区别在于：如果事先使用父级项目的<dependencyManagement>进行了配置，则子模块项目在添加时，不需要指定版本号，直接使用父级项目配置的版号，以便于在父级项目中统一管理依赖的版本！

03

记一次渗透挖洞提权实战

摘要：这是一次挖掘cms通用漏洞时发现的网站，技术含量虽然不是很高，但是也拿出来和大家分享一下吧，希望能给一部分人带来收获。

04

Laravel框架实现的上传图片到七牛功能详解

本文实例讲述了Laravel框架实现的上传图片到七牛功能。分享给大家供大家参考，具体如下：

04

【5分钟玩转Lighthouse】打造沉浸式Markdown写作环境

在使用Markdown写文章插入图片后，由于使用的是本地电脑的图片，此时文档一旦发送到其他人或者其他电脑，那么图片的链接就失效了，导致Markdown文章中的图片无法显示。为了解决这个问题，图片的地址就要是网络上的链接地址，而不能是本地电脑的链接地址。如果我们将图片存储到图床服务器中，那么我们既能在Markdown中使用图片的网络链接地址，又能在管理图片，后面写其他文章时还可以复用图片的链接。

Django 2.1.7 自定义form表单中上传图片、显示图片

Django 2.1.7 Admin管理后台 - 注册模型、自定义显示列表字段 Django 2.1.7 Admin - 列表页选项 Django 2.1.7 Admin - 编辑页选项 Django 2.1.7 Admin - 重写模板，自定义后台 Django 2.1.7 上传图片 - Admin后台管理

02

43. Django 2.1.7 自定义form表单中上传图片、显示图片

上一篇章Django 2.1.7 上传图片 - Admin后台管理说明了使用admin后台上传图片，本篇继续来看看如何自定义上传图片。

02

俄罗斯著名商业CMS DataLife Engine v16.0

DataLife Engine 是一个多功能的内容管理系统。得益于非常强大的新闻、文章和用户管理系统，DataLife Engine 主要设计用于在 Internet 上创建自己的大众媒体网站和博客。该引擎的各种基本功能（最初集成到其中）使 DataLife Engine 在网站创建方面进一步领先于其最接近的竞争对手。并且由于精确和复杂的核心结构可以最大限度地减少服务器资源的负载，DataLife Engine 能够轻松地处理具有大量出勤率的项目，从而将服务器负载保持在最低水平。定制设计的灵活性和易于定制和集成让您可以学习和了解模板的结构并尽快部署自己的网站，而无需任何额外的材料成本。先进的 AJAX 技术可以减少服务器上的流量和资源以及访问者的流量，更不用说访问者在网站上使用该技术的易用性了。由于对引擎的安全性、便利性和动态发展的日益关注，全球超过 90,000 个成功使用它的门户网站已经表示支持 DataLife Engine。对搜索引擎优化给予了极大的关注，它可以引导更多的访问者访问您的网站。

02

jmeter并发接口测试教程_jmeter高并发测试

3.添加配置元件-CSV 数据文件设置，将测试数据存在csv文件中，配置路径和需要读取的参数

01

mm-wiki开源干净的文档系统

当前市场上众多的优秀的文档系统百家争鸣，但是能够完全开源支持私有化部署的却屈指可数。目前个人了解到的体验较好的有MrDoc和mm-wiki。

04

想开启高效写作模式，有没有技巧？

【5分钟玩转Lighthouse】系列文章将为大家分享轻量应用服务器使用教程，提供丰富的实践指南，帮助大家快速上手并获得最佳产品体验。本期主要介绍如何借力 Lighthouse 实例与 Chevereto/PicGo/Typora 打造沉浸式 Markdown 写作环境。背景介绍在使用 Markdown 写文章插入图片后，由于使用的是本地电脑的图片，文档一旦发送到其他人或者其他电脑，图片的链接就会失效，导致 Markdown 文章中的图片无法显示。为了解决这个问题，图片的地址就需要是网络上而

03

AUXPI：简单的API图床程序，支持上传到搜狗/新浪/SMMS等多个图床

对于图床程序的话，博主之前介绍过好几种，查看：Chevereto、ImgURL。貌似最火的还是国外的Chevereto，这里再分享个图床程序AUXPI，和ImgURL比较类似，都支持API上传，SMMS图床上传。不过该图床还处于发育初期阶段，貌似以后会越来越强，可以期待下。

02

PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

本文实例讲述了PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作。分享给大家供大家参考，具体如下：

05

wangEditor-基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费(2)

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>wangEditor上传图片到服务器</title> 7 </head> 8 9 <body> 10 11

04

使用JS实现图文混发

在我的开源项目中，很早之前实现了图文混输的功能，但是在解析消息时，解析到图片需要将其上传至服务器拿到图片地址进行特殊拼接，上传图片是异步，解析图片是同步，这就造成了文字消息已经发出去了，图片才开始上传，导致图片拼接失败。

02

开发 | 手把手，教你为小程序添加「上传图片」功能

很多小程序都为用户提供图片上传功能。这时候，使用一些「对象存储」云服务，也许是最快、最经济的选择。

02

实战 | 小小曲折渗透路之文件上传绕过

Upload-labs是一个帮你总结所有类型的上传漏洞的靶场，包括常见的文件上传漏洞

03

el-upload上传文件

这个比较简单，因为element-plus也封装好了，只需要使用headers属性，去设置请求头即可

01

知识库系统搭建

MM-Wiki 是一个使用GO开发的轻量级的企业知识分享与团队协同软件，可用于快速构建企业 Wiki 和团队知识分享平台。

01

实战 | 小小曲折渗透路之文件上传绕过

Upload-labs是一个帮你总结所有类型的上传漏洞的靶场，包括常见的文件上传漏洞

02

网站漏洞修补之metinfo远程SQL注入漏洞建议

2018年11月23日SINE网站安全检测平台，检测到MetInfo最新版本爆出高危漏洞，危害性较大，影响目前MetInfo 5.3版本到最新的 MetInfo 6.1.3版本，该网站漏洞产生的主要原因是MetInfo的上传代码里的参数值没有进行安全过滤，导致上传路径这里进行伪造路径，并可以插入恶意的代码，以及特殊字符进行上传图片到MetInfo的后台。

01

基于 Serverless 的人工智能相册小程序

日常生活中，我们常常会想要「搜索照片」。每当寻找很久远的照片时，记忆模糊，检索照片时只能想起大致的时间，然后一张张查看。这样不仅效率低下，还经常会漏掉我们想找的照片。近几年微信小程序发展迅速，如果有这么一款软件，我们只需要用文字简单描述，就能实现图片的快速检索，岂不是很棒！本项目将以小程序为例，在 Serverless 架构上进行开发。该小程序在保留相册基础功能（新建相册、删除相册、上传图片、查看图片、删除图片）上，增加人工智能搜索 —— 即用户上传图片之后，基于 Image Caption 技术，自

06

nginx + fastDFS - 单机图片服务器解决方案

最近经常有人问图片上传怎么做，有哪些方案做比较好，也看到过有关于上传图片的做法，但是都不是最好的今天再这里简单讲一下上传图片以及图片服务器的大致理念（正式环境还是建议上集群的）如果是个人项目或者企

06

WordPress 网站允许贡献者角色上传图片附件的方法

WordPress 网站允许贡献者角色上传图片附件的方法。WordPress 网站从权限中可以看出投稿者默认不支持上传图片，这对投稿者造成不便，一篇没有图片的文章怎么能吸引读者呢，那么我们如何让WordPress投稿者支持上传或删除图片呢？

03

PHP新手最佳实践

PHP官方目前已经将此系列函数标记为弃用状态，添加PHP对mysql的支持，编译时使用下面的参数

02

将站点从免费空间hostinger迁到万网主机遇到的一些问题

1. 导入备份的数据库报错复制 #1273 - Unknow collation: 'utf8mb4_unicode_cli' hostinger使用的mysql版本支持utf8mb4,而万网使用

03

iPic - MAC图床神器上传方式图床iPic 菜单iPic Mover

原文有了图床神器 iPic，不论屏幕截图、还是复制图片，都可以自动上传、保存 Markdown 格式的链接，直接粘贴插入，够懒人吧？使用 Hexo | Heroku 或 WordPress 写博客

06

八、影片添加页实现《仿淘票票系统前后端完全制作（除支付外）》

在上图中可以看到，我再是否输出 base64 图片时选择了是，这是因为在接下来上传图片时我们可以直接得到 base64 图片，这样即可方便的完成上传。在此还需要注意的一点就是，咱们需要先读取拿到图片后才可以进行内容上传，在读取图片的回调之中，再次调用这个文件接口，在动作中选择上传图片信息：

03

【php增删改查实例】- 第二十九节用户头像变更

现在考虑的问题就是如何把头像上传的地方给圈出来，我们可以在这个DIV 下面新建一个DIV：因为div是块级元素，所以会被上面的div挤下来，所以，我们可以给两个div都加上一个左浮动：得到的效果，就是两个DIV在一起了。于是，上传头像的区域就被划出来了，接下来，我们要在这个区域嵌套一层iframe，指向原来的头像上传页面。最终我们要引入的就是这个index.html

<iframe frameborder=0 scroll

03

如何利用 Github 搭建自己的免费图床？

对于写博客的朋友们来讲，图床这个东西一定不会陌生，而且在一定程度上也给大家造成过一定困扰。

01

如何利用 Github 搭建自己的免费图床？-星泽V社

对于写博客的朋友们来讲，图床这个东西一定不会陌生，而且在一定程度上也给大家造成过一定困扰。

03

WordPress上传图片不显示怎么办，如何解决？

这是茹莱神兽用WordPress搭建的第二个博客，准确来说，这个博客才是真正意义上茹莱神兽亲自动手搭建的第一个博客，另外一个博客不是茹莱神兽亲自动手搭建的，但却是目前来说用得最久的博客，差不多前一个博客域名历史用了5年。

02

打靶归来-详解upload-labs靶场（下）

本公众号提供的工具、教程、学习路线、精品文章均为原创或互联网收集，旨在提高网络安全技术水平为目的，只做技术研究，谨遵守国家相关法律法规，请勿用于违法用途，如果您对文章内容有疑问，可以尝试加入交流群讨论或留言私信，如有侵权请联系小编处理。

01

wordpress自动重命名上传文件的文件名

使用wordpress的人可能都知道，wordpress是可支持文件中文的，可是在有时候在为了一些特殊功能时候，需要文件或者图片为非英文的，如果是文件很多，那一个一个的修改起来那不是很累吗，直接为所有上传图片重新命名为非中文的。

03

Echo 是如何支持 MarkDown 的

这个点其实没啥技术含量，就是集成一下开源的 MarkDown 编辑器，按照说明按部就班地走就行了。

03

Nginx 搭建图片服务器

本章内容通过Nginx 和 FTP 搭建图片服务器。在学习本章内容前，请确保您的Linux 系统已经安装了Nginx和Vsftpd。

03

小程序开发：上传图片到腾讯云

使用对象存储服务 COS 时，可通过 RESTful API 对 COS 发起 HTTP 匿名请求或 HTTP 签名请求，对于签名请求，COS 服务器端将会进行对请求发起者的身份验证。

02

WordPress 复制粘贴上传图片

WordPress后台发表文章的时，如果通过复制粘贴把电脑中的图片添加上传到文章中，免去手动上传的步骤是不是会很方便，这里推荐两款复制粘贴上传图片的WordPress插件。

02

wangeditor富文本编辑器的使用（超详细）

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137644.html原文链接：https://javaforall.cn

02

Typora + PicGo + SM.MS实现图片自动上传

文章背景：新版的Typora（比如0.9.86）目前已经支持自动上传图片到图床。本人用的是window10系统，在网上看了不少教程，实践中也走了一些弯路，在此记录并分享下自己的实践经历，给后来人一些启发。

03

laravel5.5框架的上传图片功能实例分析【仅传到服务器端】

本文实例讲述了laravel5.5框架的上传图片功能。分享给大家供大家参考，具体如下：

03

unicloud云开发---uniapp云开发(二)---云存储基础

服务空间 https://unicloud.dcloud.net.cn/home

02

WordPress 网站文章中插入图片同主题代码不一样的原因

WordPress 网站文章中插入图片同主题代码不一样的原因。最近有主题用户问：为什么查看插入到文章中的图片源代码与我博客的不一样，多出很多代码。这些多出的代码是WordPress 增加一个叫“图片多屏自适功能”，用于在不同屏幕大小的设备上显示不同尺寸的图片。

02

前端开发：Vant组件—Uploader文件上传的方法（图片上传）

前段时间在开发项目的时候，有一个业务需求是上传图片，之前做移动端开发的时候上传图片也是非常基本的需求，但是对于前端开发来说需要研究一下怎么实现的。我们的项目用的是Vant组件，然后我就直接去Vant的组件官网查看上传文件的使用方法，然后直接看着官网API教程使用即可，如果有什么疑问还可以问度娘、问朋友。

01

关于Laravel 5.8.*(laravel-admin 1.x)的一些问题以及解决办法汇总

**解决办法:**把config/app.php中的'timezone' => 'UTC'修改为'timezone' => 'PRC'或者'timezone' => 'Asia/Shanghai'即可

02

Hbuilder中微信小程序上传多图的案例分享

注：wx.uploadFile 方法需要小程序设置，上传文件合法域名才可使用。本地测试时，微信开发者工具可以选择不校验合法域名。

02

WordPress网站漏洞检测及漏洞修复解决方案

2019年正月刚开始，WordPress最新版本存在远程代码注入获取SHELL漏洞，该网站漏洞影响的版本是wordpress5.0.0，漏洞的产生是因为image模块导致的，因为代码里可以进行获取目录权限，以及文件包含功能，导致远程代码注入成功。

01

网站漏洞检测之WordPress 5.0.0 修复方案

2019年正月刚开始，WordPress最新版本存在远程代码注入获取SHELL漏洞，该网站漏洞影响的版本是wordpress5.0.0，漏洞的产生是因为image模块导致的，因为代码里可以进行获取目录权限，以及文件包含功能，导致远程代码注入成功。

04

微信小程序——图片识别

课程大作业的目的是：运用在本次课程中学到的知识来指导实践，了解程序设计其实现方法，学会解决实际问题。掌握微信小程序设计的具体步骤与基本方法，针对选定的程序做调研分析。通过课程大作业，提高实践动手技能，培养独立分析分析问题和解决问题的能力。课程大作业的要求：本次课程大作业的选题比较灵活，可以是自主选题，也可以参考课本中的案例自行修改完善，题目要符合课程大作业的要求，并且具备一定的水平和深度。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭