网站 被黑,自己创建网站怎么得流量钱,17173游戏排行榜,哈尔滨门户网站是什么方式1#xff1a;数据库存放图片地址,图片存放在Django项目文件中 1.首先#xff0c;我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下
from django.db import modelsclass Image(models.Model):title models.C…方式1数据库存放图片地址,图片存放在Django项目文件中 1.首先我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下
from django.db import modelsclass Image(models.Model):title models.CharField(max_length100)image models.ImageField(upload_toimages/)uploaded_at models.DateTimeField(auto_now_addTrue)def __str__(self):return self.title2.下一步在settings.py文件里配置媒体文件上传
import osMEDIA_URL /media/
MEDIA_ROOT os.path.join(BASE_DIR, media)3.在forms.py文件中创建表单
from django import forms
from .models import Imageclass ImageForm(forms.ModelForm):class Meta:model Imagefields [title, image]4.在视图文件里增加两个函数一个是用来前端给后端传图片流数据后端进行处理另一个是后端从数据库中调出图片返还给前端
from django.shortcuts import render, redirect
from .forms import ImageForm
from .models import Imagedef upload_image(request):if request.method POST:form ImageForm(request.POST, request.FILES)if form.is_valid():form.save()return redirect(image_list)else:form ImageForm()return render(request, upload_image.html, {form: form})def image_list(request):images Image.objects.all()return render(request, image_list.html, {images: images})5.前端upload_image.html文件。这里为了体现出主要功能所以写的有些简陋。
!DOCTYPE html
html
headtitle上传图片/title
/head
bodyh1图片上传/h1form methodpost enctypemultipart/form-data{% csrf_token %}{{ form.as_p }}button typesubmit确认上传/button/form
/body
/html6.前端image_list.html文件.
!DOCTYPE html
html
headtitle图片展示/title
/head
bodyh1图片列表/h1ul{% for image in images %}lih2{{ image.title }}/h2img src{{ image.image.url }} alt{{ image.title }} stylewidth: 200px; height: auto;/li{% endfor %}/ul
/body
/html7.在urls.py文件中完成相关配置
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from .views import upload_image, image_listurlpatterns [path(upload/, upload_image, nameupload_image),path(images/, image_list, nameimage_list),
] static(settings.MEDIA_URL, document_rootsettings.MEDIA_ROOT)8.最后一步基础操作完成创建和应用数据库迁移运行查看结果
python manage.py makemigrations
python manage.py migratepython manage.py runserver方式1流程及效果展示 前后端完整过程为前端填写图片标题等信息之后选择图片并传给后端后端把前端传过来的图片保存在当前项目文件中并在数据库中存放图片的位置。前端想要查看图片后端先从数据库中调出图片的位置信息之后把位置信息传给前端前端src展示出图片
前端选择并上传图片 后端返还图片 数据库中存放的数据 Django项目文件结构 方式2数据库直接存放base64转码后的数据随调随用 1.编写模型,同上
class Base64Image(models.Model):title models.CharField(max_length100)image_data models.TextField() # 用于存储base64编码的图片数据def __str__(self):return self.title 2.编写表单
class Base64ImageForm(forms.Form):title forms.CharField(max_length100)image forms.ImageField()
3.编写视图(在views.imageBase64.py中编写)
import base64
from django.shortcuts import render, redirect
from app01.forms import Base64ImageForm
from app01.models import Base64Imagedef upload_base64_image(request):if request.method POST:form Base64ImageForm(request.POST, request.FILES)if form.is_valid():title form.cleaned_data[title]image form.cleaned_data[image]image_data base64.b64encode(image.read()).decode(utf-8)Base64Image.objects.create(titletitle, image_dataimage_data)return redirect(image_list)else:form Base64ImageForm()return render(request, upload_base64_image.html, {form: form})def image_list(request):images Base64Image.objects.all()return render(request, image_list.html, {images: images})4.前端代码,upload_base64_image.html
!DOCTYPE html
html
headtitle上传Base64图片/title
/head
bodyh2测试上传/h2form methodpost enctypemultipart/form-data{% csrf_token %}{{ form.as_p }}button typesubmit上传/button/form
/body
/html5.前端代码,image_list.html
!DOCTYPE html
html
headtitlebase64图片张氏/title
/head
bodyh2图片列表/h2ul{% for image in images %}lih3{{ image.title }}/h3img srcdata:image/jpeg;base64,{{ image.image_data }} alt{{ image.title }}/li{% endfor %}/ul
/body
/html6.url文件中配置相关路径同上省略
方式2效果展示
1.前端上传图片 2.前端接收base64图片 数据库中图片数据展示
