当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/wahzx/article/details/139879203 2024/10/6 14:30:54

方式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图片

数据库中图片数据展示

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

方式1：数据库存放图片地址,图片存放在Django项目文件中 1.首先，我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下 from django.db import modelsclass Image(models.Model):title models.C…...

编程日记 2024/6/23 7:15:22

如何配置IOMMU或者SWIOTLB

1. 前言这篇文章说明了如何在Linux内核中启用和配置IOMMU和SWOTLB。当今的计算或者嵌入设备使用一种内存分区的方法进行外设的管理，如显卡、PCI设备或USB设备，都将设备映射为一段内存，用于设备的读写。传统意义上的IOMMU用于内存映射&a…...

编程日记 2024/6/23 7:13:19

【大数据复习】第3章分布式文件系统HDFS（重中之重）

一、概念 1.分布式文件系统把文件分布存储到多个计算机节点上，通过网络实现、文件在多台主机上进行分布式存储的文件系统。（就是你的电脑存a，我的电脑存pple） 2.降低了硬件开销: 与之前使用多个处理器和专用高级硬件的并行化处理装…...

编程日记 2024/6/23 7:12:18

element-ui里message抖动问题

由于element默认屏蔽滚动条，导致取消时弹message时侧边滚动栏突然回来后引起抖动问题是由于打开弹窗时出现遮罩层dialog对话框时引起了元素内容超出自身尺寸对应的overflow样式内容为hidden，且新建了一个class类内容为增加17 内右边距，当…...

编程日记 2024/6/23 7:11:17

Attention系列总结-粘贴自知乎

1. 梦想做个翟老师：阿里：Behavior Sequence Transformer 解读48 赞同 7 评论文章优点:捕捉用户行为历史序列中的顺序信息。w2v也是捕捉用户序列信息的,本质差异在于啥？ 添加图片注释，不超过 140 字（可选&#xff0…...

编程日记 2024/6/23 7:09:14

swagger下载文件名中文乱码、swagger导出文件名乱码、swagger文件导出名称乱码、解决swagger中文下载乱码bug

文章目录一、场景描述：swagger导出文件名称乱码二、乱码原因三、解决方法3.1、方法一、在浏览器中输入地址下载3.2、方法二、swagger升级为2.10.0及以上四、可能遇到的问题4.1、DocumentationPluginsManager.java:152 一、场景描述：swagger导出文件名称…...

编程日记 2024/6/23 7:07:12

191.回溯算法：组合总和|||（力扣）

代码解决 class Solution { public:vector<vector<int>> result; // 存储所有符合条件的组合vector<int> res; // 当前组合// 回溯函数void backtracing(int k, int n, int index, int sum) {// 如果当前组合的长度等于k，且总和等于nif (res.si…...

编程日记 2024/6/23 7:06:11

JupyterLab使用指南(二):JupyterLab基础

第2章 JupyterLab基础 2.1 JupyterLab界面介绍 JupyterLab的用户界面非常直观和灵活。它包括文件浏览器、工作区、多标签页、命令面板和侧边栏等功能。以下是各个部分的详细介绍： 2.1.1 文件浏览器文件浏览器位于界面左侧，用于导航和管理文件。你可…...

编程日记 2024/6/23 7:05:09

ubuntu18.04 + openssl + engine + pkcs11+ softhsm2 双向认证测试

安装环境 openssl 1.1.1 pkcs11-tool （由sudo apt-get install opensc 安装） libpksc11 （需源码安装apt install 只有libp11, 源码安装才有 libpksc11.so -> pkcs11.so） softhsm2 （由sudo apt-get install softhsm…...

编程日记 2024/6/23 7:04:08

【C++】类和对象2.0

俺来写笔记了，哈哈哈，浅浅介绍类和对象的知识点！ 1.类的6个默认成员函数俺们定义一个空类： class N {}; 似乎这个类N里面什么都没有，其实不是这样子的。这个空类有6个默认的成员函数。默认成员函数&#xff1a…...

编程日记 2024/6/23 7:02:05

【LLM之KG】KoPA论文阅读笔记

研究背景知识图谱补全（KGC）是通过预测知识图谱中缺失的三元组来完善知识图谱的信息。传统方法主要基于嵌入和预训练语言模型，但这些方法往往忽视了知识图谱的结构信息，导致预测效果不佳。研究目标本文的研究目标是探索如何将…...

编程日记 2024/6/23 7:01:03

UI设计速成课：理解模态窗口与非模态窗口的区别

我们日常所说的弹性框架是非常笼统的概念。我们习惯性地称之为对话框架、浮动层和提示条。弹性框架可以分为两种:模态弹性框架和非模态弹性框架。产品需要弹性框架来传递信息，用户需要弹性框架来接受反馈，但是没有经过推敲的弹出窗口设计很容易让用户感到…...

编程日记 2024/6/23 7:00:02

【Linux】基础IO_4

文章目录六、基础I/O4. 动静态库未完待续六、基础I/O 4. 动静态库既然我们能够成功创建静态库了，接下来我们将这个代码打包成动态库： shared: 表示生成共享库格式 fPIC：产生位置无关码(position independent code) 动态库库名规则&…...

编程日记 2024/6/23 6:59:01

C++模板类原理讲解

C模板类原理讲解 C模板是一种强大的编译期工具，它允许我们创建通用的、类型无关的类和函数。模板的主要目的是实现代码的重用和泛型编程。模板类的原理涉及以下几个方面： 模板的定义和实例化模板的类型参数模板特化模板的编译过程模板的优点和缺点 1.…...

编程日记 2024/6/23 6:58:00

scratch编程03-反弹球

这篇文章和上一篇文章《scratch3编程02-使用克隆来编写小游戏》类似（已经完全掌握了克隆的可以忽略这篇文章），两篇文章都使用到了克隆来编写一个小游戏，这篇文章与上篇文章不同的是，本体在进行克隆操作时，不…...

编程日记 2024/6/23 6:56:58

postgresql数据库进阶知识

postgresql数据库进阶知识 # 如果表存在就先删除 drop table if exists student; # 创建学生表 # id serial not null 表示id自增 # id integer not null 表示id不自增 create table student (id serial not nullconstraint student_pkprimary…...

编程日记 2024/6/23 6:55:57

关于HTTP劫持，该如何理解、防范和应对

一、引言 HTTP劫持（HTTP Hijacking）是一种网络安全威胁，它发生在HTTP通信过程中，攻击者试图通过拦截、篡改或监控用户与服务器之间的数据流量，以达到窃取敏感信息或执行恶意操作的目的。今天我们就来详细了解HTTP劫持…...

编程日记 2024/6/23 6:52:54

System.Data.OracleClient.OracleException:“ORA-12571: TNS: 包写入程序失败

System.Data.OracleClient.OracleException:“ORA-12571: TNS: 包写入程序失败解决方法： 首先%oracle_home%/network/admin下的sqlnet.ora文件，把SQLNET.AUTHENTICATION_SERVICES (NTS)加个 # 注释掉就好了...

编程日记 2024/6/23 6:51:52

saas产品运营案例 | 联盟营销计划如何帮助企业提高销售额？

在当今数字化时代，SaaS（软件即服务）产品已成为企业提高效率、降低成本的重要工具。然而，面对激烈的市场竞争，如何有效地推广SaaS产品、提高销售额，成为许多企业面临的挑战。林叔将以ClickFunnels为例&#…...

编程日记 2024/6/23 6:50:50

模式分解算法-满足3NF的无损且保持函数依赖的分解算法、满足BCNF的无损连接分解算法

一、引言 1、对指定的关系模式，若范式级别较低，为第一范式或第二范式，由于存在数据冗余或更新异常问题，在实际中一般是不可用的，关系模式的规范化就是将满足低一级的关系模式分解为若干满足高一级范式的关系模式的集合…...

编程日记 2024/6/23 6:49:49

荷兰与法国战平，双方能携手出现？

就在昨天晚上，荷兰队经历了90分钟的鏖战，最终0-0与法国队握手言和。此役，哈维-西蒙斯为荷兰队打进一球，但进球被判无效。从目前的积分形势来看，双方基本上确定携手晋级16强赛。本场比赛，荷兰队后卫内森-阿克…...

编程日记 2024/6/23 6:46:46

数据可视化实验二：回归分析、判别分析与聚类分析

目录一、使用回归分析方法分析某病毒是否与温度呈线性关系 1.1 代码实现 1.2 线性回归结果 1.3 相关系数验证二、使用判别分析方法预测某病毒在一定的温度下是否可以存活，分别使用三种判别方法，包括Fish判别、贝叶斯判别、LDA 2.1 数据集展示&am…...

编程日记 2024/6/23 6:45:44

FL论文专栏｜设备异构、异步联邦

论文：Asynchronous Federated Optimization（12th Annual Workshop on Optimization for Machine Learning） 链接实现Server的异步更新。每次Server广播全局Model的时候附带一个时间戳，Client跑完之后上传将时间戳和Model同时带回…...

编程日记 2024/6/23 6:44:43

【Java毕业设计】基于JavaWeb的礼服租赁系统

文章目录摘要Abstract目录1 绪论1.1 课题背景和意义1.2 国内外研究现状1.2.1 国外研究现状 1.3 课题主要内容 2 开发相关技术介绍2.1 Spring Boot框架2.2 Vue框架2.3 MySQL数据库2.4 Redis数据库 3 系统分析3.1 需求分析3.1.1 用户需求分析3.1.2 功能需求分析 3.2 可行性分析…...

编程日记 2024/6/23 6:43:41

代码随想录训练营Day 66|卡码网101.孤岛的总面积、102.沉没孤岛、103.水流问题、104.建造最大岛屿

1.孤岛的总面积 101. 孤岛的总面积 | 代码随想录代码：(bfs广搜) #include <iostream> #include <vector> #include <queue> using namespace std; int dir[4][2] {1,0,0,1,-1,0,0,-1}; int count; void bfs(vector<vector<int>>&a…...

编程日记 2024/6/23 6:42:40

根据状态转移写状态机-二段式

目录描述输入描述： 输出描述： 描述题目描述： 如图所示为两种状态机中的一种，请根据状态转移图写出代码，状态转移线上的0/0等表示的意思是过程中data/flag的值。要求： 1、必须使用对应类型的状…...

编程日记 2024/6/23 6:41:39

PyTorch C++扩展用于AMD GPU

PyTorch C Extension on AMD GPU — ROCm Blogs 本文演示了如何使用PyTorch C扩展，并通过示例讨论了它相对于常规PyTorch模块的优势。实验在AMD GPU和ROCm 5.7.0软件上进行。有关支持的GPU和操作系统的更多信息，请参阅系统要求（Linux&#xf…...

编程日记 2024/6/23 6:40:38

Hadoop archive

Index of /dist/hadoop/commonhttps://archive.apache.org/dist/hadoop/common/...

编程日记 2024/6/23 6:36:34

R语言——R语言基础

1、用repeat、for、while计算从1-10的所有整数的平方和 2、编写一个函数，给出两个正整数，计算他们的最小公倍数 3、编写一个函数，让用户输入姓名、年龄，得出他明年的年龄。用paste打印出来。例如："Hi xiaoming …...

编程日记 2024/6/23 6:35:33

VFB电压反馈和CFB电流反馈运算放大器(运放)选择指南

VFB电压反馈和CFB电流反馈运算放大器(运放)选择指南电流反馈和电压反馈具有不同的应用优势。在很多应用中，CFB和VFB的差异并不明显。当今的许多高速CFB和VFB放大器在性能上不相上下，但各有其优缺点。本指南将考察与这两种拓扑结构相关的重要考虑因素。…...

编程日记 2024/6/23 6:33:30

编程日记 2024/6/23 6:32:29

Java高手的30k之路｜面试宝典｜精通JVM（二）

JVM基本结构类加载子系统：负责将.class文件加载到内存中，并进行验证、准备、解析和初始化。运行时数据区：包括堆（Heap）、方法区（Method Area）、Java栈（Java Stack）、本…...

编程日记 2024/6/23 6:31:28

JVM专题六：JVM的内存模型

前面我们通过Java是如何编译、JVM的类加载机制、JVM类加载器与双亲委派机制等内容了解到了如何从我们编写的一个.Java 文件最终加载到JVM里的，今天我们就来剖析一下这个Java的‘中介平台’JVM里面到底长成啥样。 JVM的内存区域划分 Java虚拟机（JVM&…...

编程日记 2024/6/23 6:29:26

学习java第一百零七天

解释JDBC抽象和DAO模块使用JDBC抽象和DAO模块，我们可以确保保持数据库代码的整洁和简单，并避免数据库资源关闭而导致的问题。它在多个数据库服务器给出的异常之上提供了一层统一的异常。它还利用Spring的AOP模块为Spring应用程序中的对象提供事务管理服…...

编程日记 2024/6/23 6:28:25

k8s上尝试滚动更新和回滚

滚动更新和回滚实验目标： 学习如何进行应用的滚动更新和回滚操作。实验步骤： 创建一个 Deployment。更新 Deployment 的镜像版本，观察滚动更新过程。回滚到之前的版本，验证回滚操作。今天呢，我们继续来进行我们k…...

编程日记 2024/6/23 6:27:23

GitHub Copilot 登录账号激活，已经在IntellJ IDEA使用

GitHub Copilot 想必大家都是熟悉的，一款AI代码辅助神器，相信对编程界的诸位并不陌生。今日特此分享一项便捷的工具，助您轻松激活GitHub Copilot，尽享智能编码之便利！ GitHub Copilot 是由 GitHub 和 OpenAI 共同开…...

编程日记 2024/6/23 6:26:22

进程知识点（二）

文章目录一、进程关系？二、孤儿态进程(Orphan)定义危害处理三、僵尸进程定义处理四、守护进程(Daemon )定义作用总结一、进程关系？ 亲缘关系：亲缘关系主要体现于父子进程，子进程父进程创建，代码继承于父进程&…...

编程日记 2024/6/23 6:25:21

【线性代数】【一】1.6 矩阵的可逆性与线性方程组的解

文章目录前言一、求解逆矩阵二、线性方程组的解的存在性总结前言前文我们引入了逆矩阵的概念，紧接着我们就需要讨论一个矩阵逆的存在性以及如何求解这个逆矩阵。最后再回归上最初的线性方程组的解，分析其中的联系。一、求解逆矩阵我们先回想一下在…...

编程日记 2024/6/23 6:23:18

基于大型语言模型的全双工语音对话方案

摘要解读我们提出了一种能够以全双工方式运行的生成性对话系统，实现了无缝互动。该系统基于一个精心调整的大型语言模型（LLM），使其能够感知模块、运动功能模块以及一个具有两种状态（称为神经有限状态机，n…...

编程日记 2024/6/23 6:22:17

Spring Boot集成Minio插件快速入门

1 Minio介绍 MinIO 是一个基于 Apache License v2.0 开源协议的对象存储服务。它兼容亚马逊 S3 云存储服务接口，非常适合于存储大容量非结构化的数据，例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等，而一个对象文件可以是任意大小&…...

编程日记 2024/6/23 6:20:15

【C++新特性】右值引用

右值和右值的区别 C11 中右值可以分为两种：一个是将亡值（ xvalue, expiring value），另一个则是纯右值（ prvalue, PureRvalue）： 纯右值：非引用返回的临时变量、运算表达式产生的临时变…...

编程日记 2024/6/23 6:18:12

信息安全基础知识（完整）

信息安全基础知识安全策略表达模型是一种对安全需求与安全策略的抽象概念表达，一般分为自主访问控制模型（HRU）和强制访问控制模型（BLP、Biba）IDS基本原理是通过分析网络行为（访问方式、访问量、与历史访问…...

编程日记 2024/6/23 6:17:10

QT

#include "widget.h" #include "ui_widget.h" Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) ,Gcancle(new QPushButton("取消",this)) ,EmmEdit(new QLineEdit(this)) { ui->setupUi(this);…...

编程日记 2024/6/23 6:16:09

双例集合（三）——双例集合的实现类之TreeMap容器类

Map接口有两个实现类，一个是HashMap容器类，另一个是TreeMap容器类。TreeMap容器类的使用在API上于HashMap容器类没有太大的区别。它们的区别主要体现在两个方面，一个是底层实现方式上，HashMap是基于Hash算法来实现的吗&#xff0c…...

编程日记 2024/6/23 6:15:08

[SAP ABAP] 运算符

1.算数运算符算术运算符描述加法-减法*乘法/除法MOD取余示例1 输出结果: 输出结果: 2.比较运算符比较运算符描述示例等于 A B A EQ B <> 不等于 A <> B A NE B >大于 A > B A GT B <小于 A < B A LT B >大于或等于 A > B A GE B <小…...

编程日记 2024/6/23 6:14:07

MSPM0G3507 ——GPIO例程讲解2——simultaneous_interrupts

主函数： #include "ti_msp_dl_config.h"int main(void) {SYSCFG_DL_init();/* Enable Interrupt for both GPIOA and GPIOB ports */NVIC_EnableIRQ(GPIO_SWITCHES_GPIOA_INT_IRQN); //启用SWITCHES——A的中断 NVIC_EnableIRQ(GPIO_S…...

编程日记 2024/6/23 6:11:04

某程序员：30岁了，老婆管钱，背着我买了50万股票，亏了20w，强制她清仓后又买了36万

“辛辛苦苦攒了几年钱，本想买房买车，结果全被老婆炒股亏掉了！” 近日，一位30岁的程序员大哥在网上吐苦水，引发了网友们的热议。这位程序员大哥和妻子结婚后，一直秉持着“男主外，女主内”的传统…...

编程日记 2024/6/23 6:09:01

Docker常见面试题整理

文章目录 1. Docker 是什么？它解决了什么问题？2. Docker 和虚拟机（VM）的区别是什么？3、Docker三个核心概念4、如何构建一个 Docker 镜像？5、如何将一个 Docker 容器连接到多个网络？6、Docker Co…...

编程日记 2024/6/23 6:08:00

35 - 最后一个能进入巴士的人（高频 SQL 50 题基础版)

35 - 最后一个能进入巴士的人 -- sum(weight) over(order by turn) as total,根据turn升序，再求前面数的和 selectperson_name from(selectperson_name,sum(weight) over(order by turn) as totalfromQueue) new_Queue wheretotal<1000 order by total desc lim…...

编程日记 2024/6/23 6:06:59

WPF将dll文件嵌入到exe文件中

WPF将dll文件嵌入到exe文件中第一步：打开.csproj文件，在Import节点后添加如下代码： <Target Name"AfterResolveReferences"><ItemGroup><EmbeddedResource Include"(ReferenceCopyLocalPaths)" Condit…...

编程日记 2024/6/23 6:04:57

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

方式1流程及效果展示

方式2：数据库直接存放base64转码后的数据，随调随用

方式2效果展示

相关文章：