将图片保存到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字段要使用NOT NULL
May 13 MySQL
超详细教你怎么升级Mysql的版本
May 19 MySQL
MySQL下使用Inplace和Online方式创建索引的教程
May 26 MySQL
浅谈MySQL user权限表
Jun 18 MySQL
MySQL 数据恢复的多种方法汇总
Jun 21 MySQL
MySQL如何解决幻读问题
Aug 07 MySQL
深入解析MySQL索引数据结构
Oct 16 MySQL
SQL优化老出错,那是你没弄明白MySQL解释计划用法
Nov 27 MySQL
MySQL限制查询和数据排序介绍
Mar 25 MySQL
详细介绍MySQL中limit和offset的用法
May 06 MySQL
MySQL脏读,幻读和不可重复读
May 11 MySQL
MySQL分布式恢复进阶
Jul 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
You might like
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
javascript实现画板功能
2020/04/12 Javascript
js制作提示框插件
2020/12/24 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python实现多线程抓取妹子图
2015/08/08 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Django异步任务线程池实现原理
2019/12/17 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
晚会邀请函范文
2014/01/24 职场文书
优秀学生评语大全
2014/04/25 职场文书
公司任命书范本
2014/06/04 职场文书
党的生日演讲稿
2014/09/10 职场文书
给朋友的道歉短信
2015/05/12 职场文书
请假条应该怎么写?
2019/06/24 职场文书