將圖片保存到mysql數(shù)據(jù)庫并展示在前端頁面的實現(xiàn)代碼

更新時間：2021年05月02日 08:44:16 作者：跟著哈哥學大智若愚

這篇文章主要介紹了將圖片保存到mysql數(shù)據(jù)庫并展示在前端頁面,本文給的大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1，首先用pycharm創(chuàng)建django項目并配置相關環(huán)境

這里小編默認項目都會創(chuàng)建

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，創(chuàng)建表

①先按鍵盤上win+s鍵，然后輸入cmd，中文輸入法兩下回車，英文輸入法一下回車，即可進入dos窗口。

②輸入 mysql -uroot -p密碼回車進入mysql數(shù)據(jù)庫，再輸入 create database 表名; 一個小回車，創(chuàng)建數(shù)據(jù)庫🆗

在這里插入圖片描述

③在app下的models.py中創(chuàng)建表結構

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/'是指定圖片存儲的文件夾名稱，上傳文件之后會自動創(chuàng)建
    img_name = models.CharField(max_length=32)
    create_time = models.DateTimeField(auto_now_add=True)

④遷移數(shù)據(jù)庫

分別按順序在pycharm下面的Terminal中執(zhí)行下面兩條語句

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方式簡要實現(xiàn)，并沒有加上漂亮的頁面和樣式，喜歡美的看客朋友可自行去Bootstrap官網或jq22自行添加?。?！

到此這篇關于將圖片保存到mysql數(shù)據(jù)庫并展示在前端頁面的文章就介紹到這了,更多相關圖片保存mysql數(shù)據(jù)庫展示前端頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解MySQL從入門到放棄-安裝
這篇文章主要介紹了MySQL從入門到放棄-安裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
登錄MySQL時出現(xiàn)Authentication plugin ‘caching_sha2_pass
這篇文章主要介紹了登錄MySQL時出現(xiàn)Authentication plugin ‘caching_sha2_password‘ reported error錯誤的解決方案,文中通過圖文結合的形式講解的非常詳細,對大家的解決問題有一定的幫助,需要的朋友可以參考下
2024-12-12
使用RPM包安裝MySQL 5.7.18的教程
這篇文章主要介紹了使用RPM包安裝MySQL 5.7.18的教程,需要的朋友可以參考下
2017-04-04
MySQL報錯Failed to open the referenced&nbs
在數(shù)據(jù)庫操作中,嘗試刪除外鍵約束表'master_role'時遇到錯誤碼3730,因其被'user_role'表中的外鍵'fk_user_role'引用,解決方法包括關閉外鍵檢查和刪除外鍵,阿里巴巴開發(fā)手冊和知乎回答指出,外鍵雖能維護數(shù)據(jù)一致性
2024-11-11
Mysql怎么存儲json格式數(shù)據(jù)詳解
在開發(fā)中遇到存取html值的情況,并且要根據(jù)id進行實時返回,在做的時候想到了mysql的json類型存儲,下面這篇文章主要給大家介紹了關于Mysql怎么存儲json格式數(shù)據(jù)的相關資料,需要的朋友可以參考下
2022-06-06
Mysql 設置boolean類型的操作
這篇文章主要介紹了Mysql 設置boolean類型的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-06-06
基于 Mysql 實現(xiàn)一個簡易版搜索引擎
本文基于 Mysql 8.0 版本，數(shù)據(jù)庫引擎采用的是 InnoDB，關于 Mysql 實現(xiàn)一個簡易版搜索引擎，感興趣的朋友可以參考下文
2021-08-08
MySQL行級鎖、表級鎖、頁級鎖詳細介紹
這篇文章主要介紹了MySQL行級鎖、表級鎖、頁級鎖詳細介紹,同時列舉了一些實例說明,需要的朋友可以參考下
2014-05-05
mysql缺少my.ini文件的解決方法
使用的這么長時間的mysql,有一天我突然需要使用mysql?的配置文件my.ini時發(fā)現(xiàn)沒有這個文件并且這個文件不是被隱藏了,所以本文給大家介紹了mysql缺少my.ini文件的解決方法,需要的朋友可以參考下
2023-12-12
解決數(shù)據(jù)庫有數(shù)據(jù)但查詢出來的值為Null問題
這篇文章主要介紹了解決數(shù)據(jù)庫有數(shù)據(jù)但查詢出來的值為Null問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10