Implementation code for saving images to MySQL database and displaying them on the front-end page

Implementation code for saving images to MySQL database and displaying them on the front-end page

The editor uses the Django framework in Python to complete it!

1. First, use pycharm to create a Django project and configure the relevant environment

Here the editor will create a default project

Two configurations to be modified in 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. Create a table

① First press the win+s key on the keyboard, then enter cmd, press Enter twice for Chinese input method, and press Enter once for English input method to enter the DOS window.

② Enter mysql -uroot -p password and press Enter to enter the mysql database, then enter create database table name; a small Enter to create the database🆗

insert image description here

③Create the table structure in models.py under app

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/' specifies the folder name for image storage. It will be automatically created after uploading the file. img_name = models.CharField(max_length=32)
    create_time = models.DateTimeField(auto_now_add=True)

④Migrate the database

Execute the following two statements in the Terminal under pycharm in order

python manage.py makemigrations

python manage.py migrate

insert image description here

3. Upload picture function

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 = 'Uploading images of this format is not supported yet! ! ! '
        else:
            models.Images.objects.create(img_name=pic_name, img=img)
            return redirect('show')
    return render(request, 'upload.html', locals())

Front-end upload page upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload photos</title>
</head>
<body>
<div style="height: 160px">
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <h1>Upload image page</h1>
        <table cellpadding="5px">
            <tr>
                <td>Upload pictures</td>
                <td><input type="file" name="img"></td>
            </tr>
            <tr>
                <td>
                    <button>Upload</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" >Back</a>
</div>
</body>
</html>

insert image description here

4. Display picture function

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 = 'Uploading images of this format is not supported yet! ! ! '
        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())

Front-end display show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show photos</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" >Back</a>
</p>
</body>
</html>

insert image description here

5. Delete picture function

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 = 'Uploading images of this format is not supported yet! ! ! '
        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>Show photos</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" >Delete</a>
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow" rel="external nofollow" >Back</a>
</p>
</body>
</html>

insert image description here

6. Demonstrate the whole thing

insert image description here

Because of the tight time, it is implemented in the lowest possible way, without adding beautiful pages and styles. Friends who like beauty can go to the Bootstrap official website or jq22 to add it by themselves! ! !

This is the end of this article about saving pictures to MySQL database and displaying them on the front-end page. For more relevant pictures saved in MySQL database and displayed on the front-end page content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Solve the problem of mysql data loss when docker restarts redis
  • Solution to the problem of data loss when using Replace operation in MySQL
  • Several solutions to prevent MySQL data loss when the server goes down
  • Why the disk space is not released after deleting data in MySQL
  • Python Basics: Operating MySQL Database
  • Teach you how to solve the error when storing Chinese characters in MySQL database
  • Django saves pictures to MySQL database and displays them on the front-end page
  • MyBatis batch insert/modify/delete MySql data
  • Summary of MySQL data migration
  • Golang implements the submission and rollback of MySQL database transactions
  • Detailed explanation of the role of the default database after MySQL installation
  • Causes and solutions for MySQL data loss

<<:  Vue multi-page configuration details

>>:  Seven Principles of a Skilled Designer (1): Font Design

Recommend

How to use the flash plug-in to call the PC's camera and embed it into the TML page

Preface The reason for writing this article is mai...

Setting z-index property for flash overlay popup layer in web design does not work

By default, Flash will always be displayed at the ...

SSH port forwarding to achieve intranet penetration

The machines in our LAN can access the external n...

MySQL 8.0.17 installation and simple configuration tutorial under macOS

If you don’t understand what I wrote, there may b...

Thoughts and experience sharing on interactive design of reading lists for information products

A list is defined as a form of text or chart that...

Native JS to achieve sliding button effect

The specific code of the sliding button made with...

Can you do all the web page making test questions?

Web page design related questions, see if you can...

How to display texture at the position of swipe in CocosCreator

Table of contents 1. Project requirements 2. Docu...

MySQL 8.0.12 Installation and Configuration Tutorial

This article records the detailed tutorial for in...

Detailed explanation of Linux file permissions and group modification commands

In Linux, everything is a file (directories are a...

Detailed explanation of the principle of Vue monitoring data

Table of contents 1. Introduction II. Monitoring ...

DHTML objects (common properties of various HTML objects)

!DOCTYPE Specifies the Document Type Definition (...

Solution to the impact of empty paths on page performance

A few days ago, I saw a post shared by Yu Bo on G...

How to use custom images in Html to display checkboxes

If you need to use an image to implement the use ...

After docker run, the status is always Exited

add -it docker run -it -name test -d nginx:latest...