摘要：下一步就是修改視圖。判斷語句的條件有兩個(gè)博文的標(biāo)題圖不是必須的，剔除掉沒有標(biāo)題圖的文章，這些文章不需要處理圖片。總結(jié)本章學(xué)習(xí)了如何上傳并處理文章的標(biāo)題圖，從此博客首頁就有了漂亮的外觀。

現(xiàn)在雖然博客的功能大都實(shí)現(xiàn)了，但是界面還是比較樸素，特別是首頁的文章列表幾乎全是文字，看多了難免疲勞。因此，給每個(gè)文章標(biāo)題配一張標(biāo)題圖，不僅美觀，用戶也能通過圖片快速了解文章內(nèi)容。實(shí)際上大部分社交網(wǎng)站也都是這么干的，畢竟人的天性就是懶，能看圖就堅(jiān)決不看字。

在上傳用戶頭像章節(jié)中，我們已經(jīng)接觸過上傳、展示圖片了。標(biāo)題圖的實(shí)現(xiàn)也差不多，不同的是本章會(huì)更近一步，對(duì)圖片進(jìn)行縮放等處理，使頁面整潔美觀、并且高效。

與用戶頭像類似，標(biāo)題圖是屬于每篇博文自己的“資產(chǎn)”，因此需要修改model，新建一個(gè)字段：

article/models.py

class ArticlePost(models.Model):
    ...
    
    # 文章標(biāo)題圖
    avatar = models.ImageField(upload_to="article/%Y%m%d/", blank=True)
    
    ...

注意上傳地址中的%Y%m%d是日期格式化的寫法。比如上傳時(shí)間是2019年2月26日，則標(biāo)題圖會(huì)上傳到media/article/20190226這個(gè)目錄中。

記得數(shù)據(jù)遷移。

標(biāo)題圖通常在創(chuàng)建新文章的時(shí)候就設(shè)置好了，而新文章是通過表單上傳到數(shù)據(jù)庫中的。因此接下來就是修改發(fā)表文章的表單類：

article/forms.py

...
class ArticlePostForm(forms.ModelForm):
    class Meta:
        ...
        fields = ("title", "body", "tags", "avatar")

增加了avatar字段而已，沒有新內(nèi)容。

下一步就是修改視圖。因?yàn)镻OST的表單中包含了圖片文件，所以要將request.FILES也一并綁定到表單類中，否則圖片無法正確保存：

article/views.py

...
def article_create(request):
    if request.method == "POST":
        # 增加 request.FILES
        article_post_form = ArticlePostForm(request.POST, request.FILES)
        
        ...

很好，功能差不多已經(jīng)通了，接下來就是對(duì)圖片進(jìn)行處理。

寫代碼之前先構(gòu)思一下需要進(jìn)行怎樣的處理：

標(biāo)題圖對(duì)畫質(zhì)沒有太高的要求，因此需要縮小圖片的體積，以便提高網(wǎng)頁的加載速度。

其次還需要對(duì)圖片的長寬進(jìn)行規(guī)范化。我比較喜歡將圖片的寬度設(shè)置得相同，這樣標(biāo)題可以比較整齊。

下一個(gè)問題是，代碼應(yīng)該寫到什么地方呢？似乎在model、form或者view里處理圖片都可以。在這里我打算把代碼寫到model中去，這樣不管你在任何地方上傳圖片（包括后臺(tái)中！），圖片都會(huì)得到處理。

想好之后，就要行動(dòng)了。還記得Pillow這個(gè)庫嗎，我們很早就把它安裝好了，現(xiàn)在是使用它的時(shí)候了：

article/models.py

...

# 記得導(dǎo)入！
from PIL import Image

class ArticlePost(models.Model):
    ...
    # 前面寫好的代碼
    avatar = models.ImageField(upload_to="article/%Y%m%d/", blank=True)
    
    # 保存時(shí)處理圖片
    def save(self, *args, **kwargs):
        # 調(diào)用原有的 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
    
...

代碼不多，但是有很多細(xì)節(jié)，值得仔細(xì)推敲。不急，一行一行來：

save()是model內(nèi)置的方法，它會(huì)在model實(shí)例每次保存時(shí)調(diào)用。這里改寫它，將處理圖片的邏輯“塞進(jìn)去”。

super(ArticlePost, self).save(*args, **kwargs)的作用是調(diào)用父類中原有的save()方法，即將model中的字段數(shù)據(jù)保存到數(shù)據(jù)庫中。因?yàn)閳D片處理是基于已經(jīng)保存的圖片的，所以這句一定要在處理圖片之前執(zhí)行，否則會(huì)得到找不到原始圖片的錯(cuò)誤。

if判斷語句的條件有兩個(gè)：

博文的標(biāo)題圖不是必須的，self.avatar剔除掉沒有標(biāo)題圖的文章，這些文章不需要處理圖片。

不太好理解的是這個(gè)not kwargs.get("update_fields")。還記得article_detail()視圖中為了統(tǒng)計(jì)瀏覽量而調(diào)用了save(update_fields=["total_views"])嗎？沒錯(cuò)，就是為了排除掉統(tǒng)計(jì)瀏覽量調(diào)用的save()，免得每次用戶進(jìn)入文章詳情頁面都要處理標(biāo)題圖，太影響性能了。

這種判斷方法雖然簡單，但會(huì)造成模型和視圖的緊耦合。讀者在實(shí)踐中可探索更優(yōu)雅的方法，比如專門設(shè)置一個(gè)參數(shù)，用來判斷是哪類視圖調(diào)用了save()。

接下來都是Pillow處理圖片的流程了：打開原始圖片，取得分辨率，將新圖片的寬度設(shè)置為400并根據(jù)比例縮小高度，最后用新圖片將原始圖片覆蓋掉。Image.ANTIALIAS表示縮放采用平滑濾波。

最后一步，將父類save()返回的結(jié)果原封不動(dòng)的返回去。

完美！

剩下的工作就比較簡單了。

修改發(fā)表文章的模板，讓表單能夠上傳圖片：

templates/article/create.html

...



    ...

    
    

        標(biāo)題圖
        
    
    
    ...

...

然后修改文章列表模板，讓其能夠展現(xiàn)標(biāo)題圖。

為了美觀，這里稍微改動(dòng)了列表循環(huán)的整體結(jié)構(gòu)：

templates/article/list.html

...



    {% for article in articles %}
        
        {% if article.avatar %}
            

                
    {% endfor %}


...

接下來又是喜聞樂見的測(cè)試環(huán)節(jié)。

啟動(dòng)服務(wù)器，打開發(fā)表文章頁面：

選擇幾張分辨率各不相同的圖片作為標(biāo)題圖，

發(fā)表幾篇文章并回到文章列表頁面：

看起來似乎不錯(cuò)。

查看一下media目錄下實(shí)際保存的圖片：

確實(shí)保存到想要的目錄下，并且左下角顯示圖片的寬度全都為400了。

功能已經(jīng)實(shí)現(xiàn)了，但還有掃尾工作需要去做：

需要對(duì)上傳的圖片做更多的驗(yàn)證工作，比如上傳的文件是否為圖片、分辨率是否滿足要求。雖然在個(gè)人博客項(xiàng)目中這些驗(yàn)證并不是特別重要，但在其他項(xiàng)目中就說不好了：誰知道用戶會(huì)上傳些什么奇奇怪怪的東西？

編輯文章、刪除文章也同樣需要處理上傳的圖片。你還可以將縮放分辨率的技術(shù)應(yīng)用到用戶頭像上，比如裁剪成方形。

注意：刪除數(shù)據(jù)庫中的avatar條目只是斷開了數(shù)據(jù)表和圖片的鏈接而已，實(shí)際上圖片還保存在原來的位置。要徹底刪除圖片，你還得寫操作系統(tǒng)文件的代碼才行。

怎么實(shí)現(xiàn)這些功能就不贅述了，留給讀者自己去折騰吧。

雖然本文是自己動(dòng)手寫的代碼（嚴(yán)格說來Pillow也是輪子），但想必你也猜到了，還有更加智能的輪子：django-imagekit，這個(gè)庫可以直接繼承到model字段里面，比如這樣：

article/models.py

# 引入imagekit
from imagekit.models import ProcessedImageField
from imagekit.processors import ResizeToFit

class ArticlePost(models.Model):
    ...
    
    avatar = ProcessedImageField(
        upload_to="article/%Y%m%d",
        processors=[ResizeToFit(width=400)],
        format="JPEG",
        options={"quality": 100},
    )

字段中定義好了上傳位置、處理規(guī)則、存儲(chǔ)格式以及圖片質(zhì)量，你不需要寫任何處理圖片的代碼了。

更多的用法見官方介紹。

本章學(xué)習(xí)了如何上傳并處理文章的標(biāo)題圖，從此博客首頁就有了漂亮的外觀。

需要指出的是，個(gè)人博客所采用的服務(wù)器通常性能不佳，用來保存文章縮略圖等小尺寸的圖片倒還好，但是千萬不要存儲(chǔ)大尺寸的圖片文件，否則用戶等待幾分鐘都刷不開你的圖片，那是很悲劇的。

因此建議你將大尺寸的圖片、視頻等放到專業(yè)的云對(duì)象存儲(chǔ)服務(wù)商中，比如七牛云、又拍云等，在你存儲(chǔ)量很小時(shí)（10G以內(nèi)）是花不了多少錢的。

有疑問請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。

或Email私信我：dusaiphoto@foxmail.com

項(xiàng)目完整代碼：Django_blog_tutorial