首页
所有分类
TAGS
文字工具 EMOJI BIBLE
数据库 MySQL

将图片保存到mysql数据库并展示在前端页面的实现代码

Posted in MySQL onMay 02, 2021

小编使用python中的django框架来完成！

1，首先用pycharm创建django项目并配置相关环境

这里小编默认项目都会创建

settings.py中要修改的两处配置

DATABASES = {
    'default': {
        # 'ENGINE': 'django.db.backends.sqlite3',
        # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'photos',
        'HOST': '127.0.0.1',
        'PORT': '3306',
        'USER': 'root',
        'PASSWORD': '201314',

    }
}


STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

2，创建表

①先按键盘上win+s键，然后输入cmd，中文输入法两下回车，英文输入法一下回车，即可进入dos窗口。

②输入 mysql -uroot -p密码 回车进入mysql数据库，再输入 create database 表名; 一个小回车，创建数据库?

将图片保存到mysql数据库并展示在前端页面的实现代码

③在app下的models.py中创建表结构

models.py

from django.db import models

# Create your models here.


class Images(models.Model):
    img = models.ImageField(upload_to='static/pictures/')  # upload_to='static/pictures/'是指定图片存储的文件夹名称，上传文件之后会自动创建
    img_name = models.CharField(max_length=32)
    create_time = models.DateTimeField(auto_now_add=True)

④迁移数据库

分别按顺序在pycharm下面的Terminal中执行下面两条语句

python manage.py makemigrations

python manage.py migrate

将图片保存到mysql数据库并展示在前端页面的实现代码

3，上传图片功能

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', views.upload, name='upload'),

]

views.py

from django.shortcuts import render, redirect
from app01 import models


# Create your views here.


def upload(request):
    error = ''
    if request.method == 'POST':
        img = request.FILES.get('img')
        pic_name = img.name
        if pic_name.split('.')[-1] == 'mp4':
            error = '暂不支持上传此格式图片！！！'
        else:
            models.Images.objects.create(img_name=pic_name, img=img)
            return redirect('show')
    return render(request, 'upload.html', locals())

前端上传页面upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传照片</title>
</head>
<body>
<div style="height: 160px">
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <h1>上传图片页面</h1>
        <table cellpadding="5px">
            <tr>
                <td>上传图片</td>
                <td><input type="file" name="img"></td>
            </tr>
            <tr>
                <td>
                    <button>上传</button>
                </td>
                <td><strong style="color: red">{{ error }}</strong></td>
            </tr>
        </table>
    </form>
</div>
<div style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href=" {% url 'show' %} " rel="external nofollow" >返回</a>
</div>
</body>
</html>

将图片保存到mysql数据库并展示在前端页面的实现代码

4，展示图片功能

urls.py

"""
from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', views.upload, name='upload'),
    url(r'^show/$', views.show, name='show'),

]

views.py

from django.shortcuts import render, redirect
from app01 import models


# Create your views here.


def upload(request):
    error = ''
    if request.method == 'POST':
        img = request.FILES.get('img')
        pic_name = img.name
        if pic_name.split('.')[-1] == 'mp4':
            error = '暂不支持上传此格式图片！！！'
        else:
            models.Images.objects.create(img_name=pic_name, img=img)
            return redirect('show')
    return render(request, 'upload.html', locals())


def show(request):
    all_images = models.Images.objects.all()
    # for i in all_images:
    #     print(i.img)
    return render(request, 'show.html', locals())

前端展示show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示照片</title>
</head>
<body>
{% for image in all_images %}
    <img src="/{{ image.img }}" style="width: 240px;height: 240px;">
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow"  rel="external nofollow" >返回</a>
</p>
</body>
</html>

将图片保存到mysql数据库并展示在前端页面的实现代码

5，删除图片功能

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', views.upload, name='upload'),
    url(r'^show/$', views.show, name='show'),
    url(r'^delete/$', views.delete, name='delete'),

]

views.py

from django.shortcuts import render, redirect
from app01 import models


# Create your views here.


def upload(request):
    error = ''
    if request.method == 'POST':
        img = request.FILES.get('img')
        pic_name = img.name
        if pic_name.split('.')[-1] == 'mp4':
            error = '暂不支持上传此格式图片！！！'
        else:
            models.Images.objects.create(img_name=pic_name, img=img)
            return redirect('show')
    return render(request, 'upload.html', locals())


def show(request):
    all_images = models.Images.objects.all()
    # for i in all_images:
    #     print(i.img)
    return render(request, 'show.html', locals())


def delete(request):
    pk = request.GET.get('pk')
    models.Images.objects.filter(id=pk).delete()
    return redirect('show')

show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示照片</title>
</head>
<body>
{% for image in all_images %}
    <img src="/{{ image.img }}" style="width: 240px;height: 240px;">
    <a href="/delete/?pk={{ image.id }}" rel="external nofollow" >删除</a>
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow"  rel="external nofollow" >返回</a>
</p>
</body>
</html>

将图片保存到mysql数据库并展示在前端页面的实现代码

6，整体演示一遍

将图片保存到mysql数据库并展示在前端页面的实现代码

因为时间紧，故以最low方式简要实现，并没有加上漂亮的页面和样式，喜欢美的看客朋友可自行去Bootstrap官网或jq22自行添加！！！

到此这篇关于将图片保存到mysql数据库并展示在前端页面的文章就介绍到这了,更多相关图片保存mysql数据库展示前端页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

将图片保存到mysql数据库并展示在前端页面的实现代码

- Author -

跟着哈哥学大智若愚

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

MySQL 相关文章推荐
MySQL Router的安装部署
Apr 24 MySQL
MySQL中使用or、in与union all在查询命令下的效率对比
May 26 MySQL
Navicat连接MySQL错误描述分析
Jun 02 MySQL
MySQL系列之十四 MySQL的高可用实现
Jul 02 MySQL
mysq启动失败问题及场景分析
Jul 15 MySQL
MySQL外键约束(FOREIGN KEY)案例讲解
Aug 23 MySQL
mysql主从复制的实现步骤
Oct 24 MySQL
MySQL学习之基础操作总结
Mar 19 MySQL
MySQL索引 高效获取数据的数据结构
May 02 MySQL
mysql 体系结构和存储引擎介绍
May 06 MySQL
MySQL慢查询中的commit慢和binlog中慢事务的区别
Jun 16 MySQL
MySQL count(*)统计总数问题汇总
Sep 23 MySQL
MySQL的join buffer原理
Apr 29 #MySQL
Mysql服务添加 iptables防火墙策略的方案
Apr 29 #MySQL
MySQL数据迁移相关总结
MySQL慢查询的坑
解决MySQL存储时间出现不一致的问题
Apr 28 #MySQL
jdbc使用PreparedStatement批量插入数据的方法
Apr 27 #MySQL
MySQL安装后默认自带数据库的作用详解
Apr 27 #MySQL
reload(1) 负载均衡(6) shell(3) 反向代理(2) 防盗链(1) Telnet(1) http(6) 动静分离(1) 生成缩略图(1) https(7)
You might like
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
html下载本地
2006/06/19 Javascript
学习ExtJS（二） Button常用方法
2009/10/07 Javascript
NodeJS制作爬虫全过程（续）
2014/12/22 NodeJs
node.js+express制作网页计算器
2016/01/17 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python创建文本文件的简单方法
2020/08/30 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
phpquery中文手册
2021/03/18 PHP
建筑行业的大学生自我评价
2013/12/08 职场文书
工地安全检查制度
2014/02/04 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
领导接待方案
2014/03/13 职场文书
中考标语大全
2014/06/05 职场文书
投资意向书
2014/07/30 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
电影圆明园观后感
2015/06/03 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle