Django搭建個人博客：上傳頭像圖片

summerpxy 發布于2019-07-30 18:37 / 2366人閱讀

摘要：到目前為止我們的博客處理的都是文字。比如說圖片上傳是年月日，則圖片會保存在中。添加標簽用于上傳圖片。除了上傳，圖片的處理還包括驗證格式改變尺寸更名裁剪美化等多種多樣的需求。如果上傳的圖片重名，會導致報錯嗎請試試看。

到目前為止我們的博客處理的都是文字。現代互聯網早就進入了“讀圖”時代，圖片的維護、展示也就相當重要。

上一章中預留了avatar字段，用來保存用戶上傳的頭像，現在我們來實現這個功能。

必要的設置

圖片屬于一種媒體文件，它與靜態文件類似，需要設置一個統一的目錄，便于集中存儲和訪問。

這類需要框架統一設置的參數，當然應該在/my_blog/settings.py中。在底部加上：

/my_blog/settings.py

...

# 媒體文件地址
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")

MEDIA_ROOT和MEDIA_URL是用戶上傳文件保存、訪問的位置：

在前面的Profile中我們設置了upload_to參數。有了這個參數，文件上傳后將自動保存到項目根目錄的media文件夾中。 os.path.join(MEDIA_ROOT, "media/")指定了media文件夾的位置。

MEDIA_URL代表用戶通過URL來訪問這個本地地址的URL。設置好這個參數后，用戶就可以通過解析url，很方便的獲取文件的地址。這樣做的好處是避免的硬編碼，讓代碼更容易維護。

Django框架擅長的是對邏輯的處理，而對圖片這類文件的處理則非常的耗時。因此在實際的生產環境中（即產品上線之后），通常是有專門的Web服務器來處理文件的訪問。

而在開發階段我們不會在意效率問題，所以Django也提供了方法，讓開發服務器能夠處理圖片。

在/my_blog/urls.py添加下面的語句：

/my_blog/urls.py

...
# 新引入的模塊
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...
]

#添加這行
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

這樣就為以后上傳的圖片配置好了URL路徑。

編寫MTV

回顧一下，avatar的字段已經在上一章寫好了：

/userprofile/models.py

...
class Profile(models.Model):
    ...
    avatar = models.ImageField(upload_to="avatar/%Y%m%d/", blank=True)
    ...

upload_to指定了圖片上傳的位置，即/media/avatar/%Y%m%d/。%Y%m%d是日期格式化的寫法，會最終格式化為系統時間。比如說圖片上傳是2018年12月5日，則圖片會保存在/media/avatar/2018205/中。

注意ImageField字段不會存儲圖片本身，而僅僅保存圖片的地址。

記得用pip指令安裝Pillow。

表單類在前面也寫好了，不用修改：

/userprofile/forms.py

...
class ProfileForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ("phone", "avatar", "bio")

接著需要修改視圖，使之能夠對圖片進行處理：

/userprofile/views.py

...
@login_required(login_url="/userprofile/login/")
def profile_edit(request, id):
    ...

    # 修改本行
    # 上傳的文件保存在 request.FILES 中，通過參數傳遞給表單類
    profile_form = ProfileForm(request.POST, request.FILES)

    if profile_form.is_valid():
        ...
        
        # 添加在 profile.bio = profile_cd["bio"] 后面
        # 如果 request.FILES 存在文件，則保存
        if "avatar" in request.FILES:
            profile.avatar = profile_cd["avatar"]

        ...

表單上傳的文件對象存儲在類字典對象request.FILES中，因此需要修改表單類的參數，將它一并傳遞進去。

如果request.FILES中存在鍵為avatar的元素，則將其賦值給profile.avatar（注意保存的是圖片地址）；否則不進行處理。

修改模板文件，添加代碼顯示、處理用戶的頭像：

/templates/userprofile/edit.html

...

{% if profile.avatar %}
    頭像
    
{% else %}
    暫無頭像
{% endif %}




{% csrf_token %}
    
    
        上傳頭像
        
    
    
    ...

模板語法{% if ... %}判斷用戶是否上傳頭像。

標簽用于顯示圖片內容；在style屬性中規定了圖片的最大寬度并帶有一點的圓角。

注意，表單必須設置enctype="multipart/form-data"屬性，才能夠正確上傳圖片等文件。

添加標簽用于上傳圖片。

啟動服務器，刷新用戶信息頁面：

點擊選擇圖片，上傳一張圖片后點擊提交：

查看一下項目目錄，生成了新的文件夾media/avatar/20181205/，其中存儲了該頭像文件；在SQLiteStudio中查看avatar字段，其保存的是文件的url地址。

除了上傳，圖片的處理還包括驗證格式、改變尺寸、更名、裁剪、美化等多種多樣的需求。

如果上傳的圖片重名，會導致報錯嗎？請試試看。

更改圖片僅僅會改變字段中存儲的url，并不會真正刪除圖片本身。因此在處理大容量文件時要小心，需要額外的方法進行清理。

總結

本章學習了通過表單上傳文件的基礎知識。更加高級的文件處理手段還需在探索中不斷發掘。你還可以利用BootStrap知識，美化個人信息外觀，使它像一個完善的產品級頁面。

有疑問請在杜賽的個人網站留言，我會盡快回復。

或Email私信我：dusaiphoto@foxmail.com

項目完整代碼：Django_blog_tutorial

轉載請告知作者并注明出處。

云服務器 GPU云服務器 php上傳個人頭像搭建個人博客個人博客搭建如何用wordpress搭建個人博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/42755.html

Django搭建個人博客：給文章加個漂亮的標題圖

摘要：下一步就是修改視圖。判斷語句的條件有兩個博文的標題圖不是必須的，剔除掉沒有標題圖的文章，這些文章不需要處理圖片。總結本章學習了如何上傳并處理文章的標題圖，從此博客首頁就有了漂亮的外觀。現在雖然博客的功能大都實現了，但是界面還是比較樸素，特別是首頁的文章列表幾乎全是文字，看多了難免疲勞。因此，給每個文章標題配一張標題圖，不僅美觀，用戶也能通過圖片快速了解文章內容。實際上大部分社交網站也...

taowen 2019-07-31 10:06 評論0 收藏0
Django搭建個人博客：擴展用戶信息

摘要：博客網站的用戶信息并不復雜，因此擴展就足夠了。可以在這個基礎上，擴展為一個美觀詳細的用戶信息頁面。當然最好再給個人信息添加一個入口。沒有對用戶的登錄狀態進行檢查。總結本章使用一對一鏈接的方式，擴展并更新了用戶信息。可能你已經發現了，Django自帶的User模型非常實用，以至于我們沒有寫用戶管理相關的任何模型。但是自帶的User畢竟可用的字段較少。比方說非常重要的電話號碼、頭像等都...

Eastboat 2019-07-30 18:37 評論0 收藏0
Django搭建個人博客：使用django-ckeditor富文本編輯器

摘要：后面兩個編輯器自帶，不用單獨下載，添上就可以了添加相關插件這樣就完成了代碼高亮效果不錯在前臺使用為了讓用戶在前臺也能使用富文本編輯器，還得對代碼稍加改動。對于有些不喜歡的人來說，甚至可以連博文都使用提供的富文本編輯器。前面我們已經實現了用Markdown語法寫文章了。但是文章的評論用Markdown就不太合適了，你不能強求用戶也花時間去熟悉語法啊。另外評論中通常還有表情、帶顏色的字體...

beanlam 2019-07-31 10:11 評論0 收藏0
使用 Vue2.js + Node.js 搭建一個小型的全棧項目

摘要：大概過來一個多月，我決定兩路開工。使用給前端寫接口，配備后臺管理功能，先把后臺搭建好。大概幾天過后，后臺一些簡單的功能實現后，就開始用開始搭建前臺，也一直在想做點什么比較好，于是就做了個豆瓣評分類似的項目。寫在前面由于最近公司業務不是很忙，空閑時間比較多，于是就在糾結Vue.js（之前就學習過）和Node.js先專研哪個比較好，最終選擇了先玩玩Node.js。經過一段時間的學習，就...

freewolf 2019-08-21 16:20 評論0 收藏0