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 correctly modify the ROOT password in MySql8.0 and above versions

Deployment environment: Installation version red ...

How to use docker to deploy front-end applications

Docker is becoming more and more popular. It can ...

Vue uniapp realizes the segmenter effect

This article shares the specific code of vue unia...

Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

Docker installation (Alibaba Cloud Server) Docker...

Detailed explanation of Kubernetes pod orchestration and lifecycle

Table of contents K8S Master Basic Architecture P...

The difference between key and index in MySQL

Let's look at the code first: ALTER TABLE rep...

About debugging CSS cross-browser style bugs

The first thing to do is to pick a good browser. ...

Copy fields between different tables in MySQL

Sometimes, we need to copy a whole column of data...

Get the calculated style in the CSS element (after cascading/final style)

To obtain the calculated style in a CSS element (t...

Implementation of CSS3 button border animation

First look at the effect: html <a href="#...

Install and configure MySQL 5.7 under CentOS 7

This article tests the environment: CentOS 7 64-b...

Detailed explanation of nginx current limiting module in Nginx source code research

Table of contents 1. Current limiting algorithm 2...

Specific use of Mysql prepare preprocessing

Table of contents 1. Preprocessing 2. Pretreatmen...

MySQL 5.7.17 installation and configuration method graphic tutorial (Ubuntu 16.04)

Download the latest version of MySQL for Ubuntu L...

Mysql implements master-slave configuration and multi-master-multi-slave configuration

What we are simulating now is a master-slave syst...