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

mysql backup script and keep it for 7 days

Script requirements: Back up the MySQL database e...

Example code for implementing hollowing effect with CSS

Effect principle Mainly use CSS gradient to achie...

How to use nginx as a load balancer for mysql

Note: The nginx version must be 1.9 or above. Whe...

How to deploy hbase using docker

Standalone hbase, let’s talk about it first. Inst...

Top 10 Time-Saving Tips to Shorten Web App Development (Graphical Tutorial)

In today's development environment, fast is b...

The rel attribute of the HTML link tag

The <link> tag defines the relationship bet...

Detailed explanation of Navicat's slow remote connection to MySQL

The final solution is in the last picture If you ...

Install mysql 5.6 from yum source in centos7.4 system

System environment: centos7.4 1. Check whether th...

How to encapsulate axios in Vue

Table of contents 1. Installation 1. Introduction...

MySQL deep paging (how to quickly paginate tens of millions of data)

Table of contents Preface Case optimization summa...

An article to teach you HTML

If you are not committed to becoming an artist, t...

Detailed explanation of various loop speed tests in JS that you don’t know

Table of contents Preface 1. for loop 2. while lo...

Analysis of the difference between absolute path and relative path in HTML

As shown in the figure: There are many files conne...

How to set up vscode remote connection to server docker container

Table of contents Pull the image Run the image (g...

MySQL learning notes help document

View system help help contents mysql> help con...