django 上传图片和文件并在页面展示

在django中创建一个用户的模型：

class User(models.Model):
    name = models.CharField(max_length=256)
    image = models.ImageField(upload_to='images/')
    introduce = models.FileField(upload_to='introduce/')

    def __str__(self):
        return self.name

模型建好后，执行以下命令在数据库中建表

# 迁移
python manage.py makemigrations
#使模型作用于数据库
python manage.py migrate

在项目根目录下创建一个media文件，用来保存上传的图片和文件

修改settings.py文件，添加如下两行

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

写一个添加用户的页面模板add.html

<h1>添加用户</h1>
<form action="/uploads/add/" enctype="multipart/form-data" method="post">
     {% csrf_token %}
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"/><br/>
    <label for="img">头像：</label>
    <input type="file" name="img" id="img"/><br/>
    <label for="introduce">简介：</label>
    <input type="file" name="introduce" id="introduce"/><br/>
    <button>提交</button>
</form>

在视图文件views.py中添加如下视图函数：

def add(request):
    if request.method == 'POST':
        name = request.POST.get('username')
        img = request.FILES.get('img')
        introduce = request.FILES.get('introduce')
        user = User(name=name, image=img, introduce=introduce)
        user.save()
        return render(request, 'uploads/add.html', locals())
    return render(request, 'uploads/add.html', locals())

到这里就可以正常上传图片和文件了。

下面就是怎么在页面上展示上传的图片和文件内容了。

修改一级路由urls.py，添加如下内容

from django.contrib import admin
from django.urls import path
from django.urls import include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
                  path('admin/', admin.site.urls),
                  path('polls/', include('polls.urls')),
                  path('uploads/', include('uploads.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Django中，如果要在页面加载静态文件，那么必须要在路由中增加static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)，其中MEDIA_URL和MEDIA_ROOT就在我们先前在settings中添加的。

在视图views.py中新增如下视图函数

def detail(request):
    user_list = User.objects.all()
    return render(request, 'uploads/detail.html', locals())

新加一个detail.html的模板页面

{% for user in user_list %}
    <h1>{{ user.name }}</h1>
    <img src="{{ user.image.url }}" />
    {% for line in user.introduce.readlines %}
        <p>{{ line.decode }}</p>
    {% endfor %}
{% endfor %}

这里注意模板文件中的这几点：

1、user.image获取的是数据库中保存的图片路径，也就是image字段，是一个字符串，如images/02.png，user.image.url就能获取图片在系统中的实际保存路径，类似的用法还有user.image.name:获取图片的名称，user.image.size:获取薄片的大小（字节数）

2、user.introduce获取的也只是数据库中introduce字段值，是文件的路径，user.introduce.readlines就能打开这个文件并能读取所有行，注意这里读取是b模式（二进制）读取的

3、line.decode就是将二进制转成字符串