脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 数据库 → Mysql → 图片保存mysql数据库展示前端页面

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

 更新时间：2021年05月02日 08:44:16   作者：跟着哈哥学大智若愚  
这篇文章主要介绍了将图片保存到mysql数据库并展示在前端页面,本文给的大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

小编使用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 表名; 一个小回车，创建数据库🆗

在这里插入图片描述

③在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

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

6，整体演示一遍

在这里插入图片描述

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

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

您可能感兴趣的文章:

相关文章

  • MySQL中with rollup的用法及说明

    MySQL中with rollup的用法及说明

    这篇文章主要介绍了MySQL中with rollup的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Workbench通过远程访问mysql数据库的方法详解

    Workbench通过远程访问mysql数据库的方法详解

    这篇文章主要给大家介绍了Workbench通过远程访问mysql数据库的相关资料，文中通过图文介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • 10个MySQL性能调优的方法

    10个MySQL性能调优的方法

    本文介绍了10个MySQL性能调优的方法，每个方法的讲解都很细致，非常实用，,需要的朋友可以参考下
    2015-07-07
  • MySQL datetime类型与时间、日期格式字符串大小比较的方法

    MySQL datetime类型与时间、日期格式字符串大小比较的方法

    这篇文章主要介绍了MySQL datetime类型与时间、日期格式字符串大小比较,本文使用的是mysql8.0.27版本，其他版本自测一下，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-11-11
  • MySQL默认sql_mode浅析

    MySQL默认sql_mode浅析

    这篇文章主要为大家介绍了MySQL默认sql_mode浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • MySQL 数据类型及最优选取规则

    MySQL 数据类型及最优选取规则

    这篇文章主要介绍了MySQL 数据类型及最优选取规则，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-08-08
  • MySQL查询排序与查询聚合函数用法分析

    MySQL查询排序与查询聚合函数用法分析

    这篇文章主要介绍了MySQL查询排序与查询聚合函数用法,结合实例形式分析了MySQL查询结果排序以及查询聚合函数相关使用技巧,需要的朋友可以参考下
    2019-11-11
  • 通过缓存+SQL修改优雅地优化慢查询

    通过缓存+SQL修改优雅地优化慢查询

    本文通过介绍缓存的基本原理和SQL语句的优化手段，以及实际案例的分析，为读者提供了一种简单而有效的优化思路。读者可以通过本文了解到如何在不修改程序代码的情况下，通过巧妙地运用缓存和SQL优化技巧，提高程序的性能和响应速度。
    2023-04-04
  • MySQL性能监控软件Nagios的安装及配置教程

    MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下
    2015-12-12
  • mysql5.7的安装及Navicate长久免费使用的实现过程

    mysql5.7的安装及Navicate长久免费使用的实现过程

    这篇文章主要介绍了mysql5.7的安装及Navicate长久免费使用的实现过程,本文给大家分享问题及解决方法，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11

最新评论