Django2.0上传图片到media文件夹以及在页面显示上传的图片

我们上传的图片一般保存在media（保存用户上传文件的地方）文件夹中，那么使用django2.0怎么上传文件到media文件夹中和显示上传到media的图片的呢。
项目结构如图：
在这里插入图片描述
结果显示：

相关代码：

dj2pro/settings.py

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

booktest/models.py


from django.db import models

class PicTest(models.Model):
    goods_pic = models.ImageField(upload_to='booktest/')

booktest/urls.py

from django.urls import path,re_path
from django.conf import settings
from django.views.static import serve
from . import views

urlpatterns = [
    path('show_upload', views.show_upload),
    path('upload_handle', views.upload_handle),
    path('show_imgs', views.show_imgs),
    re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),  //此代码是能使<img src="/media/booktest/jobs.png" width="100px">能在页面显示的关键所在
]

booktest/views.py

from django.shortcuts import render, redirect, HttpResponse
from django.conf import settings
from booktest.models import  PicTest
# 用户上传文件
def show_upload(request):
    return render(request, 'booktest/upload_pic.html')


def upload_handle(request):
    # 1、获取上传文件的处理对象
    pic = request.FILES['pic']
    # 2、创建保存的路径
    save_path = '{}/booktest/{}'.format(settings.MEDIA_ROOT, pic.name)
    with open(save_path, 'wb') as f:
        # 3、获取上传文件的内容， 并写到创建的文件中
        for content in pic.chunks():  # pic.chunks文件内容
            f.write(content)
    # 4、数据库中保存上传记录
    PicTest.objects.create(goods_pic='booktest/{}'.format(pic.name))
    return redirect('/show_imgs')


def show_imgs(request):
    pics = PicTest.objects.all()
    return render(request,'booktest/show_imgs.html', {'pics': pics})

templates/booktest/upload_pic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>
<body>
<form method="POST" action="/upload_handle" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="pic"/><br/>
    <input type="submit" value="上传"/>
</form>
</body>
</html>

templates/booktest/show_imgs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<ul>
{% for pic in pics %}
    <li style="list-style-type:none; margin-left: 10px; float: left; ">
        <img src="{{ pic.goods_pic.url }}" width="100px"/>
    </li>
{% endfor %}
</ul>
</body>
</html>

原文链接：https://blog.csdn.net/u012750106/article/details/87794275