当前位置：首页 > 文章列表 > 数据库 > MySQL > 将图片保存到mysql数据库并展示在前端页面的实现代码

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

来源：脚本之家 2022-12-30 19:59:39 0浏览收藏

怎么入门数据库编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《将图片保存到mysql数据库并展示在前端页面的实现代码》，涉及到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




    <meta charset="UTF-8"><title>上传照片</title><div style="height: 160px">
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <h1>上传图片页面</h1>
        <table cellpadding="5px"><tr><td>上传图片</td>
                <td>&lt;input type=&quot;file&quot; name=&quot;img&quot;&gt;</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 target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjWOBoo6kss2oaZefrtGxnnLOgdyxo4GYgpywdpers4CNZX6AirGyt8qhjayAmrN4nJiSt7FskeB9qryGhp6zpoVl' rel='nofollow'>返回</a>
</div>

在这里插入图片描述

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




    <meta charset="UTF-8"><title>展示照片</title>
{% for image in all_images %}
    <img  src="/%7B%7B%20image.img%20%7D%7D"   style="max-width:100%" alt="将图片保存到mysql数据库并展示在前端页面的实现代码" >
{% endfor %}
<br><p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjWOBoo6kss2oaZefrtGxnnLOgdyxo4GYgpywdpers4CNZX6AirGyt8qhjayAmrN4nJiSt7FskeB9qryGhp6zpoVl' rel='nofollow'>返回</a>
</p>

在这里插入图片描述

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




    <meta charset="UTF-8"><title>展示照片</title>
{% for image in all_images %}
    <img  src="/%7B%7B%20image.img%20%7D%7D"   style="max-width:100%" alt="将图片保存到mysql数据库并展示在前端页面的实现代码" ><a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6ycZuKkLGkyaq7roRlede0h4aXicy5bInPhamveZyovpCcnHympaOvt6-vfoabqq6IlamB3LGjgd9-m7yGgWiyfYqcf42Lo7LNq2uNn4Tes4iYmYequbOGmH2qr2SFZb6zkpp_inZ1' rel='nofollow'>删除</a>
{% endfor %}
<br><p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjWOBoo6kss2oaZefrtGxnnLOgdyxo4GYgpywdpers4CNZX6AirGyt8qhjayAmrN4nJiSt7FskeB9qryGhp6zpoVl' rel='nofollow'>返回</a>
</p>

在这里插入图片描述