[Django学习]前端+后端两种方式处理图片流数据

方式1:数据库存放图片地址,图片存放在Django项目文件中

        1.首先,我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下

from django.db import modelsclass Image(models.Model):title = models.CharField(max_length=100)image = models.ImageField(upload_to='images/')uploaded_at = models.DateTimeField(auto_now_add=True)def __str__(self):return self.title

        2.下一步,在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>
<head><title>上传图片</title>
</head>
<body><h1>图片上传</h1><form method="post" enctype="multipart/form-data">{% csrf_token %}{{ form.as_p }}<button type="submit">确认上传</button></form>
</body>
</html>

        6.前端image_list.html文件.

<!DOCTYPE html>
<html>
<head><title>图片展示</title>
</head>
<body><h1>图片列表</h1><ul>{% for image in images %}<li><h2>{{ image.title }}</h2><img src="{{ image.image.url }}" alt="{{ image.title }}" style="width: 200px; height: auto;"></li>{% endfor %}</ul>
</body>
</html>

        7.在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, name='upload_image'),path('images/', image_list, name='image_list'),
] + static(settings.MEDIA_URL, document_root=settings.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_length=100)image_data = models.TextField()  # 用于存储base64编码的图片数据def __str__(self):return self.title

        2.编写表单

class Base64ImageForm(forms.Form):title = forms.CharField(max_length=100)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(title=title, image_data=image_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>
<head><title>上传Base64图片</title>
</head>
<body><h2>测试上传</h2><form method="post" enctype="multipart/form-data">{% csrf_token %}{{ form.as_p }}<button type="submit">上传</button></form>
</body>
</html>

5.前端代码,image_list.html

<!DOCTYPE html>
<html>
<head><title>base64图片张氏</title>
</head>
<body><h2>图片列表</h2><ul>{% for image in images %}<li><h3>{{ image.title }}</h3><img src="data:image/jpeg;base64,{{ image.image_data }}" alt="{{ image.title }}"></li>{% endfor %}</ul>
</body>
</html>

6.url文件中配置相关路径,同上省略

方式2效果展示

1.前端上传图片

2.前端接收base64图片

数据库中图片数据展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/360098.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SiLM5350系列SiLM5350SABCA-DG 10A30V提供分离输出 单通道隔离栅极驱动器

SiLM5350系列SiLM5350SABCA-DG是具体有10A峰值输出电流能力&#xff0c;单通道隔离式栅极驱动器。SiLM5350系列SiLM5350SABCA-DG提供分离输出&#xff0c;可分别控制上升和下降时间。驱动电源电压为4V至30V。3V至18V的宽输入VDDI范围使驱动器适合与模拟和数字控制器接口。所有电…

c++网络通信

TCP/IP协议 OSI参考模型采用分层划分原则&#xff0c;将网络中的数据传输划分为7层&#xff0c;其中&#xff0c;物理层居于最下层&#xff0c;是最基础、核心的网络硬件层&#xff1b;应用层居于最上层&#xff0c;负责应用资源的管理。每一层使用下层的服务&#xff0c;并向…

Python爬取中国福彩网彩票数据并以图表形式显示

网页分析 首先打开中国福彩网&#xff0c;点击双色球&#xff0c;选择往期开奖栏目 进入栏目后&#xff0c;选定往期的奖金数目作为我们想要爬取的目标内容 明确目标后&#xff0c;开始寻找数据所在的位置 鼠标右击页面&#xff0c;打开网页源代码&#xff0c;在源代码中搜索…

<Rust><iced>在iced中显示gif动态图片的一种方法

前言 本文是在rust的GUI库iced中在窗口显示动态图片GIF格式图片的一种方法。 环境配置 系统&#xff1a;window 平台&#xff1a;visual studio code 语言&#xff1a;rust 库&#xff1a;iced、image 概述 在iced中&#xff0c;提供了image部件&#xff0c;从理论上说&…

手机删除照片后还可以恢复吗?5个步骤,教你掌握正确方法

手机里的照片是我们记录生活、珍藏回忆的宝库&#xff0c;但有时候我们可能会不小心删除照片&#xff0c;或者因为各种原因需要恢复已经删除的照片。别担心&#xff0c;这篇文章将为你提供关于手机照片恢复的全面指南&#xff0c;揭开手机照片的恢复之谜&#xff0c;重新拥有那…

前端:Element UI 与 Vuetify 的选择

vuetify优势 1、多端适配&#xff0c;Vuetify完全按照Material设计规范进行开发&#xff0c;每一个组件都经过精心设计&#xff0c;具有模块化、响应式和优秀的性能。 使用独特和动态的 布局 自定义您的应用程序&#xff0c;并使用 SASS 变量 自定义您的组件的样式。只需要做下…

AI入门系列:工具篇之ChatGPT的优秀的国内替代品

文章目录 一&#xff0c;智谱清言(ChatGLM)1&#xff0c;智谱清言简介2&#xff0c;[智谱清言地址&#xff0c;点我开始用吧](https://chatglm.cn/) 二&#xff0c;Kimi智能助手1&#xff0c;Kimi简介2&#xff0c;[Kimi地址&#xff0c;点我开始用吧](https://kimi.moonshot.c…

OnlyOffice-8.1版本深度测评

2024年6月19日&#xff0c;ONLYOFFICE 发布了最新版本 8.1&#xff0c;带来了超过30项新功能和432个 bug 修复。本文将详细评测该版本的新功能和改进&#xff0c;帮助用户全面了解这一升级带来的实际体验提升。 一、功能全面的 PDF 编辑器 PDF 是日常工作中不可或缺的文件格式…

牛拜克拉丝的wordpress免费企业模板

wordpress免费企业模板 挺简洁实用的wordpress免费企业模板&#xff0c;黄色模板搭建公司网站。 演示 https://www.wpniu.com/themes/40.html

​Python20 Numpy基础

NumPy&#xff08;Numerical Python&#xff09;是一个开源的Python库&#xff0c;广泛用于科学计算。它提供了一个高性能的多维数组对象&#xff0c;以及用于处理这些数组的工具和函数。NumPy是数据分析、机器学习、工程和科学研究中不可或缺的工具之一&#xff0c;因为它提供…

如何挑选护眼灯?一分钟带你了解挑选护眼灯的六大准则!

小时候&#xff0c;对正确用眼知识一无所知&#xff0c;也不明白何种光线环境对眼睛最为友善&#xff0c;结果如今的近视度数已濒临千度大关。虽然早已习惯佩戴眼镜的生活&#xff0c;但近视所带来的诸多不便仍旧在日常生活中无处不在。因此&#xff0c;对于家中孩子的视力健康…

GPT-5:人工智能的新篇章,未来已来

目录 GPT-5&#xff1a;人工智能的新篇章&#xff0c;未来已来 引言 1.人工智能的快速发展和对现代社会的影响 2.OpenAI首席技术官米拉穆拉蒂关于GPT-5发布的消息 3.GPT-5对AI领域的潜在影响和期待 4.迎接GPT-5时代的准备 方向一&#xff1a;GPT-5技术突破预测 1.1 GPT-…

整数划分(递归)

相信很多人和我一样刚开始一直不懂最后一个递推式。 q(n, m)表示&#xff1a;整数n按照“分出来的数”不大于m的分法有多少种。 可以看出q(6,2)可以分为两种情况&#xff0c;一是加数不包含2的部分&#xff0c;这部分也是家数都小于2的部分。还有一部分是包含2的&#xff0c;那…

动态合批与静态合批的网格内存占用

1&#xff09;动态合批与静态合批的网格内存占用 2&#xff09;如何让游戏能自动调起手机内置的“游戏空间”或“游戏助手” 3&#xff09;如何控制mesh.triangles值 4&#xff09;怎么让旧的粒子原地不动 这是第391篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题…

LONGHEADS:无需训练的多头注意力长文本处理框架

大模型&#xff08;LLMs&#xff09;在处理海量文本数据时展现出了前所未有的能力。然而这些模型在面对超出其训练时所见序列长度的长文本时存在两个主要问题&#xff1a;一是模型对于超出预训练长度的文本难以有效泛化&#xff0c;二是注意力机制的二次方时间复杂度导致计算成…

C#语言+net技术架构+ VS2019开发的微信公众号预约挂号系统源码 微信就医全流程体验 什么是微信预约挂号系统?

C#语言net技术架构 VS2019开发的微信公众号预约挂号系统源码 微信就医全流程体验 什么是微信预约挂号系统&#xff1f; 微信预约挂号系统是一种基于互联网的预约挂号平台&#xff0c;通过与医院信息系统的对接&#xff0c;实现了患者通过手机微信轻松预约挂号的功能。预约挂号系…

Flutter图像编辑器应用:创造生动美丽的照片体验

介绍 引言 想象一下&#xff0c;在一个阳光明媚的下午&#xff0c;与家人或朋友漫步在风景如画的街道上。拿出手机&#xff0c;迫不及待地捕捉这一刻的美好&#xff0c;按下快门&#xff0c;留下了一张充满回忆的照片。 然而&#xff0c;回到家后发现照片的亮度有些偏暗&…

Element 进度条样式优化

在开发后台管理系统时&#xff0c;经常会用到进度条这样一个控件&#xff0c;Element UI中提供了progress这样一个组件&#xff0c;如下图所示&#xff1a; 该组件默认的颜色会比较单一&#xff0c;为此时常需要对该组件的样式进行一些优化&#xff0c;以满足实际项目的需求。 …

芒果YOLOv10改进64:主干Backbone篇RepVGG结构:简单但功能强大的卷积神经网络架构

💡本篇内容:YOLOv10改进RepVGG结构:简单但功能强大的卷积神经网络架构 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv10 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式:二次创新,YOLOv10 应部分读者要求,新增一篇RepVGG 论文理论部分 + 原创最…

LabVIEW机器视觉在质量控制中的应用

基于LabVIEW的机器视觉系统在质量控制中应用广泛&#xff0c;通过图像采集、处理和分析&#xff0c;自动检测产品缺陷、测量尺寸和识别标记&#xff0c;提高生产效率和产品质量。下面介绍LabVIEW机器视觉系统在质量控制中的实现方法、应用场景及其优势。 项目背景 在现代制造业…