暂时完成了新建文章和列表的标题图，接下来做编辑文章和删除文章的标题图和标签

MyBlog/article/form.py

@@ -5,4 +5,4 @@ from .models import ArticlePost
 class ArticlePostForm(forms.ModelForm):
     class Meta:
         model = ArticlePost
-        fields = ('title', 'body', 'tags')
+        fields = ('title', 'body', 'tags', 'avatar')

MyBlog/article/migrations/0007_articlepost_avatar.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.1 on 2021-01-28 12:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('article', '0006_remove_articlecolumn_tags'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='articlepost',
+            name='avatar',
+            field=models.ImageField(blank=True, upload_to='article/%Y%m%d/'),
+        ),
+    ]

MyBlog/article/models.py

@@ -5,6 +5,7 @@ from django.contrib.auth.models import User
 from django.utils import timezone
 from django.urls import reverse
 from taggit.managers import TaggableManager
+from PIL import Image
 
 
 class ArticleColumn(models.Model):
@@ -24,6 +25,7 @@ class ArticlePost(models.Model):
     created = models.DateTimeField(default=timezone.now)  # 使用timezone.now()时 进行数据迁移会，有警告
     updated = models.DateTimeField(default=timezone.now)
     total_views = models.PositiveIntegerField(default=0)
+    avatar = models.ImageField(upload_to='article/%Y%m%d/', blank=True)
     column = models.ForeignKey(ArticleColumn,
                                null=True,
                                blank=True,
@@ -38,3 +40,16 @@ class ArticlePost(models.Model):
 
     def get_absolute_url(self):
         return reverse('article:article_detail', args=[self.id])
+
+    def save(self, *args, **kwargs):
+        # 调用原有的save的功能
+        article = super(ArticlePost, self).save(*args, **kwargs)
+        # 固定宽度缩放图片的大小
+        if self.avatar and not kwargs.get('update_fields'):
+            image = Image.open(self.avatar)
+            (x, y) = image.size
+            new_x = 400
+            new_y = int(new_x * (y / x))
+            resized_image = image.resize((new_x, new_y), Image.ANTIALIAS)
+            resized_image.save(self.avatar.path)
+        return article

MyBlog/article/views.py

@@ -61,7 +61,7 @@ def article_detail(request, id):
 @login_required(login_url='/user/login/')
 def article_create(request):
     if request.method == 'POST':
-        article_post_form = ArticlePostForm(data=request.POST)
+        article_post_form = ArticlePostForm(request.POST, request.FILES)
         # 判断提交的数据是否满足模型要求
         if article_post_form.is_valid():
             # 保存数据，但是暂时不提交到数据库中

MyBlog/templates/article/create.html

@@ -9,7 +9,7 @@
             <div class="col-12">
                 <br>
                 <!-- 提交文章的表单 -->
-                <form method="post" action=".">
+                <form method="post" action="." enctype="multipart/form-data">
                     <!-- Django中需要POST数据的地方都必须有csrf_token -->
                     {% csrf_token %}
                     <div class="form-group">
@@ -18,6 +18,11 @@
                         </label>
                         <input type="text" class="form-control" id="title" name="title">
                     </div>
+                    <!--文章标题图-->
+                    <div class="form-group">
+                        <label for="avatar">标题图</label>
+                        <input type="file" class="form-control-file" name="avatar" id="avatar">
+                    </div>
                     <!--文章类别-->
                     <div class="form-group">
                         <label for="column">分类</label>

MyBlog/templates/article/list.html

@@ -45,7 +45,16 @@
         {% endif %}
         <div class="row mt-2">
             {% for article in articles %}
-                <div class="col-12">
+                <!--标题图-->
+                {% if article.avatar %}
+                    <div class="col-3">
+                        <img src="{{ article.avatar.url }}"
+                             alt="avatar"
+                             style="max-width: 100%; border-radius: 20px;"
+                        >
+                    </div>
+                {% endif %}
+                <div class="col">
                     {% if article.column %}
                         <button type="button"
                                 onclick="window.open('{% url 'article:article_list' %}?search={{ search }}&tag={{ tag }}&column={{ article.column.id }}')"
@@ -100,6 +109,7 @@
                     </p>
                     <hr>
                 </div>
+                <hr style="width:100%;"/>
             {% endfor %}
 
         </div>

MyBlog/templates/article/update.html

@@ -16,6 +16,19 @@
                         </label>
                         <input type="text" class="form-control" id="title" name="title" value="{{ article.title }}">
                     </div>
+                    {% if article.avatar %}
+                        <div class="col-3">
+                            <img src="{{ article.avatar.url }}"
+                                 alt="avatar"
+                                 style="max-width: 100%; border-radius: 20px;"
+                            >
+                        </div>
+                    {% else %}
+                        <div class="form-group">
+                            <label for="avatar">标题图</label>
+                            <input type="file" class="form-control-file" name="avatar" id="avatar">
+                        </div>
+                    {% endif %}
                     <div class="form-group">
                         <label for="column">分类</label>
                         <select class="form-control"