django 图片上传和展示

soni321

已于 2022-05-16 23:49:13 修改

阅读量556

点赞数

分类专栏： django项目实践文章标签： django python 后端

于 2022-05-14 15:18:47 首次发布

本文链接：https://blog.csdn.net/soni321/article/details/124768639

版权

django项目实践专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在Django项目中实现文件上传、预删除信号处理以及时删除文件的功能。具体涉及MEDIA_ROOT和MEDIA_URL的设置，自定义文件上传路径，以及通过views和urls处理图片的上传、删除和前端展示。同时，使用jQuery修改上传按钮的显示效果，并展示了imgUpload.html模板的部分代码。

摘要由CSDN通过智能技术生成

settings文件

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

models文件

import time
from django.db.models.signals import pre_delete
from django.dispatch import receiver

# 用于对文件重命名，还可以修改文件的保存路径
def image_upload_to(instance, filename):
    return 'company/{}{}'.format(time.strftime("%Y%m%d%H%M%S"),filename)

# 建立与order表的关联
class Img(models.Model):
    img_url = models.ImageField(verbose_name="现场照片",upload_to=image_upload_to)
    project_id = models.ForeignKey(verbose_name="项目名称",to=Order,default=1,on_delete=models.CASCADE)

# 输出对象的同时删除文件需要添加下面的方法
@receiver(pre_delete, sender=ImgProject) # sender=你要删除或修改文件字段所在的类**
def img_delete(instance, **kwargs):       #函数名随意
    instance.img_url.delete(False)   # img_url是保存文件或图片的字段名**

urls

    # media配置——配合settings中的MEDIA_ROOT的配置，就可以在浏览器的地址栏访问media文件夹及里面的文件了
    re_path(r'media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

    path('uploadImg/<int:oid>/', temp.uploadImg),
    path('img/delete/<int:nid>/', temp.deleteImg),

imgUpload.html

{% extends 'layou.html' %}
{% block css %}
    <style>
        #img-upload{
            display: none;
        }

    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>上传图片</h3>
            </div>
            <div class="panel-body">
                <form action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                        {#  用于修改上传图片按钮的显示效果 #}
                        {# 隐藏原按钮，用jquery将时间给予修饰的按钮 #}
                        <input type="button" class="btn btn-lg btn-info" value="选择文件" id="upload_btn">&nbsp;&nbsp;
                        <span class="glyphicon glyphicon-arrow-right" aria-hidden="true">&nbsp;</span>
                        <input type="file" name="img" accept="image/*" id="img-upload">
                        <input class="btn btn-primary btn-lg " style="margin-top:5px" type="submit" value="确定上传">
                </form>
            </div>
            <div class="panel-heading">
                <h3>已上传图片</h3>
            </div>
            <div class="panel-body">
                {% for item in imgs %}
                    <div class="col-md-4">
                        <img src="{{ item.img_url.url }}" width="350px" >
                        <a href="/img/delete/{{ item.id }}" type="button" class="btn btn-danger" style="margin-top:-55px ">删除</a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    {#  用于修改上传图片按钮的显示效果 #}
    <script type="text/javascript">
        $(function () {
            $("#upload_btn").on("click",function () {
                $("#img-upload").click()
            })
        })
    </script>
{% endblock %}

views文件

def uploadImg(request,oid):
    objs = models.Img.objects.filter(project_id_id=oid)
    if request.method == "POST":
        obj = models.Order.objects.get(id=oid)
        if request.FILES.get('img') is None:
            return render(request, "imgUpload.html", {"imgs": objs})
        img = models.Img(img_url=request.FILES.get('img'),project_id=obj)
        img.save()
    return render(request, "imgUpload.html",{"imgs":objs})


def deleteImg(request,nid):
    img = models.Img.objects.get(id=nid)
    id = img.project_id_id
    img.delete()
    return redirect("/uploadImg/{}/".format(id))