將圖片保存到mysql數(shù)據(jù)庫(kù)并展示在前端頁(yè)面的實(shí)現(xiàn)代碼
小編使用python中的django框架來(lái)完成!
1,首先用pycharm創(chuàng)建django項(xiàng)目并配置相關(guān)環(huán)境
這里小編默認(rèn)項(xiàng)目都會(huì)創(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,中文輸入法兩下回車,英文輸入法一下回車,即可進(jìn)入dos窗口。
②輸入 mysql -uroot -p密碼 回車進(jìn)入mysql數(shù)據(jù)庫(kù),再輸入 create database 表名; 一個(gè)小回車,創(chuàng)建數(shù)據(jù)庫(kù)🆗
③在app下的models.py中創(chuàng)建表結(jié)構(gòu)
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/'是指定圖片存儲(chǔ)的文件夾名稱,上傳文件之后會(huì)自動(dòng)創(chuàng)建 img_name = models.CharField(max_length=32) create_time = models.DateTimeField(auto_now_add=True)
④遷移數(shù)據(jù)庫(kù)
分別按順序在pycharm下面的Terminal中執(zhí)行下面兩條語(yǔ)句
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())
前端上傳頁(yè)面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>上傳圖片頁(yè)面</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,整體演示一遍
因?yàn)闀r(shí)間緊,故以最low方式簡(jiǎn)要實(shí)現(xiàn),并沒(méi)有加上漂亮的頁(yè)面和樣式,喜歡美的看客朋友可自行去Bootstrap官網(wǎng)或jq22自行添加?。?!
到此這篇關(guān)于將圖片保存到mysql數(shù)據(jù)庫(kù)并展示在前端頁(yè)面的文章就介紹到這了,更多相關(guān)圖片保存mysql數(shù)據(jù)庫(kù)展示前端頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 解決docker重啟redis,mysql數(shù)據(jù)丟失的問(wèn)題
- MySQL使用Replace操作時(shí)造成數(shù)據(jù)丟失的問(wèn)題解決
- 防止服務(wù)器宕機(jī)時(shí)MySQL數(shù)據(jù)丟失的幾種方案
- MySQL Delete 刪數(shù)據(jù)后磁盤空間未釋放的原因
- Python基礎(chǔ)之操作MySQL數(shù)據(jù)庫(kù)
- 教你解決往mysql數(shù)據(jù)庫(kù)中存入漢字報(bào)錯(cuò)的方法
- django將圖片保存到mysql數(shù)據(jù)庫(kù)并展示在前端頁(yè)面的實(shí)現(xiàn)
- MyBatis批量插入/修改/刪除MySql數(shù)據(jù)
- MySQL數(shù)據(jù)遷移相關(guān)總結(jié)
- golang實(shí)現(xiàn)mysql數(shù)據(jù)庫(kù)事務(wù)的提交與回滾
- MySQL安裝后默認(rèn)自帶數(shù)據(jù)庫(kù)的作用詳解
- MySQL 丟失數(shù)據(jù)的原因及解決
相關(guān)文章
Mysql BinLog存儲(chǔ)機(jī)制與數(shù)據(jù)恢復(fù)方式
這篇文章主要介紹了Mysql BinLog存儲(chǔ)機(jī)制與數(shù)據(jù)恢復(fù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06Mysql大表全表update的的實(shí)現(xiàn)
有些時(shí)候在進(jìn)行一些業(yè)務(wù)迭代時(shí)需要我們對(duì)Mysql表中數(shù)據(jù)進(jìn)行全表update,本文主要介紹了Mysql大表update的的實(shí)現(xiàn)2024-08-08如何在SQL Server中實(shí)現(xiàn) Limit m,n 的功能
本篇文章是對(duì)在SQL Server中實(shí)現(xiàn) Limit m,n功能的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06MySQL中distinct語(yǔ)句去查詢重復(fù)記錄及相關(guān)的性能討論
這篇文章主要介紹了MySQL中distinct語(yǔ)句去查詢重復(fù)記錄及相關(guān)的性能討論,文中的觀點(diǎn)是在一定情況下避免在最高層查詢中使用distinct,需要的朋友可以參考下2016-01-01windows 10 下安裝mysql 5.7.17的簡(jiǎn)單筆記
之前一直在Linux下用MySQL,安裝也很簡(jiǎn)單,今天試一下windows下安裝,發(fā)現(xiàn)有很多坑,今天小編通過(guò)本教程給大家記錄下,一起看看吧2016-12-12MySQL中Innodb的事務(wù)隔離級(jí)別和鎖的關(guān)系的講解教程
這篇文章主要介紹了MySQL中Innodb的事務(wù)隔離級(jí)別和鎖的關(guān)系講解教程,來(lái)自于美團(tuán)技術(shù)團(tuán)隊(duì)的經(jīng)驗(yàn)實(shí)際經(jīng)驗(yàn)分享,需要的朋友可以參考下2015-11-11詳解MySQL中事務(wù)隔離級(jí)別的實(shí)現(xiàn)原理
這篇文章主要介紹了MySQL中事務(wù)隔離級(jí)別的實(shí)現(xiàn)原理,幫助大家更好的理解和使用MySQL數(shù)據(jù)庫(kù),感興趣的朋友可以了解下2021-01-01