Django后端上传图片并通过前端显示

原创

已于 2022-06-16 09:24:12 修改 · 2.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#django #python #后端

于 2022-06-16 09:16:39 首次发布

本文介绍了如何在Django后端使用ImageField上传图片，并在前端展示。内容包括安装pillow插件，配置settings.py，创建Storage.py，修改models.py，更新前端img标签src属性以及调整项目url配置。成功操作后，图片会存储在media文件夹并能在前端正确显示。

后端上传图片

😑FileField: 上传文件字段

参数	说明
upload_to = ""	上传文件的保存路径如：upload_to = "uploads/%Y/%m/%d/“

😑ImageField: 继承于FileField，对上传的内容进行校验，确保是有效的图片

参数	说明
upload_to = ""	上传文件的保存路径如：upload_to = "uploads/%Y/%m/%d/“
storage = None	存储组件，默认django.core.files.storage.FileSystemStorage
width_field = None	上传图片的高度保存的数据库字段名（字符串）
height_field = None	上传图片的宽度保存的数据库字段名（字符串）

第一步安装pillow这个插件

pip install pillow

第二步在settings.py中配置如下：

# 设置上传的图片保存的路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')
MEDIA_URL = '/media/'
# 并且，要在settin

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

PY123456PY123456

关注关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于Django后端与Vue前端的电商比价系统爬虫设计源码

10-01

为了帮助消费者在海量商品中找到性价比高的产品，一款基于Django后端与Vue前端技术的电商比价系统爬虫设计应运而生。该系统具备强大的数据爬取与处理能力，可以对不同电商网站的商品信息进行实时监控，并进行价格比...

Django实现后台上传并显示图片功能

09-16

主要介绍了Django实现后台上传并显示图片功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1 条评论您还未登录，请先登录后发表或查看评论

django 实现图片上传和显示操作

热门推荐

念一生之爱

03-30

2万+

版本： django 2.0.1 python 3.6.2 准备工作： pip install pillow 安装python图片处理库 pillow pip install mysqlclient 安装mysql驱动包 django工程的创建和app的创建在settings.py文件中加载app 上传操作的实现：在所建app中修改...

Django后端图片上传到前端页面并展示

IT_more_hair的博客

07-29

2992

这里用到的是base64的形式展示 views视图代码: import os import base64 from rest_framework.views import APIView from rest_framework.response import Response class ONE(APIView): def get(self, request): dir_name = request.GET.get('dir_name') request.

django中图片的上传和显示

weixin_30875157的博客

09-19

261

上传图片实际上是把图片存在服务器的硬盘中，将图片存储的路径存在数据库中。 1 首先要配置文件上传的路径： 1.1 建立静态文件目录　　在项目根目录下新建一个 static文件夹，下面再建立一个media文件夹，在media中建立一个与应用名相同的文件夹　　static为静态文件目录，里面是各个引用的静态文件，包括js css 图片等等　　static下一般分为 js ...

django 图片上传和展示

soni321的博客

05-14

640

settings文件 MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/' models文件 import time # 用于对文件重命名，还可以修改文件的保存路径 def image_upload_to(instance, filename): return 'company/{}{}'.format(time.strftime("%Y%m%d%H%M%S"),filename) # 建立与order表的关联 cl

Django上传图片和显示图片

阳光女孩---python-Girl

12-13

1652

1.首先写好models.py class UserInfo(models.Model): username = models.CharField(max_length=20, unique=True, null=False) password = models.CharField(max_length=20) image = models.ImageField(uploa...

Django后端分离使用element-ui文件上传方式

12-17

在本文中，我们将探讨如何...通过以上步骤，你可以构建一个Django后端分离的文件上传系统，利用Element-UI提供用户友好的界面和Vue.js的响应式特性。记住，前后端之间的通信需要遵守RESTful原则，确保数据的安全传输。

django后端显示图片到前端

最新发布

12-29

为了实现在Django后端向前端展示图片的功能，需遵循几个重要步骤。首先，确保项目的设置允许媒体文件的上传与访问。这涉及到`settings.py`中的配置以及URL模式的设计。 #### 设置 `MEDIA_URL` 和 `MEDIA_ROOT` 在`...

django上传与显示图片

tanqiaoxing的博客

09-15

2342

参考文章：https://www.jianshu.com/p/a3fb31f49f2e 功能：从后台admin上传图片，显示到前端页面 1、models.py 添加： img = models.ImageField(upload_to='./img/', blank=True) class Post(models.Model): title = models.CharFiel...

django将图片上传数据库后在前端显式的方法

09-20

今天小编就为大家分享一篇django将图片上传数据库后在前端显式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Django实现前台上传并显示图片功能

12-17

1. 前台 templates/upload/upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/myupload/upload/" method="post" enctype="multipart/form-data"> {% csrf_token %} 名字：<input type="text" name="name"> 头像：<input type="file

Django中图片的上传并显示

weixin_30363981的博客

06-25

415

一、settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').replace('\\', '/')#media即为图片上传的根路径二、url路由中配置 from django.conf import settings from django.conf.url...

【Django】上传图片并展示

winrh的博客

09-21

512

前端 <input id="file" name="file" type="file"> <form class="form-horizontal m-t" id="signupForm" enctype="multipart/form-data" onsubmit="return check(this)"> </form> function check(f) { let fd..

django 图片上传与显示

weixin_30443075的博客

04-07

233

由于图片上传的需要，学习了一波上传 1. 上传前端代码 <form action="写上相应的定向位置" method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" id="btn_file" name="pic1" /> <...

使用django框架上传图片并显示出来（Form模块和ModelForm模块）

qq_64556701的博客

02-26

1784

二、ModelForm模块（显现出上传图片）2、设置图片的存放路径（防止出现图片混乱）（2）在setting.py中配置。（3）在url.py中配置。（1）创建media目录。

【Django+vue3】上传和显示图片

qq_51248362的博客

11-26

3001

最近在学习使用django和vue3写一个前后端项目，在上传用户图片这边卡了好一会儿，网上找了好多资料，最后还是自己总结了一点经验。我前端用的是elment-plus框架，上传图片用了el-upload组件，后端采用django，前后端分离。本文主要介绍如何利用vue3 + django上传图片和显示图片。

django显示上传的图片

一杯清茶的博客

02-25

367

django显示上传的图片上传的图片和系统的静态文件中的图片还是不一样的 STATIC_URL = '/static/' # 别名 # 配置静态文件加载路径 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] STATIC_ROOT = os.path.join(BASE_DIR, "/static/") # 图片上传配置 MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace("\\", "/

Django用户信息中的：选择、上传、显示图片

wanghuizheng的专栏

05-16

808

点击choose file按钮，弹出文件选择对话框，选择图片cat.jpg后，该图片显示在图片显示区，点击upload file按钮，该图片url保存到数据库userinfo的photo字段，内容是photos/cat.jpg。.imageBox确定文件显示区的大小，.imageBox img确定当要显示的图片与图片显示区大小不同时，以何种方式填充图片显示区，这里采用的是不改变宽高比，适应图片显示区。3、修改用户信息编辑页面的html文件，添加图片显示区和两个按钮，分别执行图片选择、图片上传功能。