将图片保存到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 相关文章推荐
分析MySQL抛出异常的几种常见解决方式
May 18 MySQL
新手必备之MySQL msi版本下载安装图文详细教程
May 21 MySQL
MySQL触发器的使用
May 24 MySQL
分析mysql中一条SQL查询语句是如何执行的
Jun 21 MySQL
MySQL千万级数据表的优化实战记录
Aug 04 MySQL
详细聊聊MySQL中慢SQL优化的方向
Aug 30 MySQL
Mysql数据库手动及定时备份步骤
Nov 07 MySQL
SQL优化老出错,那是你没弄明白MySQL解释计划用法
Nov 27 MySQL
MySQL创建管理KEY分区
Apr 13 MySQL
Mysql InnoDB 的内存逻辑架构
May 06 MySQL
MySQL的意向共享锁、意向排它锁和死锁
Jul 15 MySQL
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
Dec 24 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
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
javascript自执行函数
2017/02/10 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Vue实现简单分页器
2018/12/29 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
详解django中Template语言
2020/02/22 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
GWebs公司笔试题
2012/05/04 面试题
求职信写作要突出重点
2014/01/01 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
企业投资意向书
2015/05/09 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers