Django图片上传与显示功能实现流程

一、先看看代码设计

1.models.py

class Article(models.Model):
    art_title = models.CharField(max_length=200, verbose_name='标题')
    art_keyword = models.CharField(max_length=80, blank=True, null=True, verbose_name='关键词')
    art_description = models.CharField(max_length=240, blank=True, null=True, verbose_name='描述')
    art_text = RichTextUploadingField(verbose_name="正文内容")
    art_click = models.IntegerField(default=1, verbose_name='点击数')
    art_time = models.DateTimeField(auto_now_add=True, verbose_name='发布时间')
    art_tags = models.ManyToManyField(to='Tags', verbose_name='标签', blank=True)
    art_img = models.ImageField(upload_to='', blank=True, null=True, verbose_name='缩略图')
    art_author = models.CharField(max_length=20, verbose_name='作者', default='爱学习的阿松')
    is_delete = models.BooleanField(default=0, verbose_name='逻辑删除')

    def __str__(self):
        return self.art_title

    class Meta:
        db_table = 'article'
        ordering = ['id']
        verbose_name = '文章'
        verbose_name_plural = verbose_name

这里通过字段”art_img”来实现图片上传，至于文章内容中的图片，这里是通过富文本编辑器来实现的，有兴趣的可以看看富文本编辑器安装教程。

2.settings.py

# 静态文件目录
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

# 图片上传目录
MEDIA_URL = "/media/"  # 在项目目录下新建一个media目录用于存储上传的图片
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 配置流媒体上传路径

新建media目录用于存储上传的图片

通过上面的几步操作，现在图片的上传功能就已经实现了，大家可以试试，当进入后台之后会显示一个文件选择按钮

选中图片后就会发现media文件夹中会有对应的图片了，这时候上传已经实现了。

二、显示图片

1.views.py

def article(request):
    if request.method == 'GET':
        user = Wakey_User.objects.filter(user_name=request.session.get('username')).first()
        art_list = Article.objects.all()

        context = {'art_list': art_list}
            return render(request, 'article.html', context=context)

2.urls.py

urlpatterns = [
    url(r'^$', views.index),
    url(r'^article.html$', views.article),
]

3.article.html

<li class="course article">
    <a class="article-img" href="/{{ art.art_link }}.html"><img src="/media/{{ art.art_img }}" alt="{{ art.art_title }}"></a>
    <div class="article-right">
         <h3 class="article-h3"><a href="/{{ art.art_link }}.html">{{ art.art_title }}</a></h3>
         <p>{{ art.art_description }}</p>

    </div>
</li>