成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Django搭建個(gè)人博客：上傳頭像圖片

summerpxy / 2484人閱讀

摘要：到目前為止我們的博客處理的都是文字。比如說(shuō)圖片上傳是年月日，則圖片會(huì)保存在中。添加標(biāo)簽用于上傳圖片。除了上傳，圖片的處理還包括驗(yàn)證格式改變尺寸更名裁剪美化等多種多樣的需求。如果上傳的圖片重名，會(huì)導(dǎo)致報(bào)錯(cuò)嗎請(qǐng)?jiān)囋嚳础?/p>

到目前為止我們的博客處理的都是文字?，F(xiàn)代互聯(lián)網(wǎng)早就進(jìn)入了“讀圖”時(shí)代，圖片的維護(hù)、展示也就相當(dāng)重要。

上一章中預(yù)留了avatar字段，用來(lái)保存用戶(hù)上傳的頭像，現(xiàn)在我們來(lái)實(shí)現(xiàn)這個(gè)功能。

必要的設(shè)置

圖片屬于一種媒體文件，它與靜態(tài)文件類(lèi)似，需要設(shè)置一個(gè)統(tǒng)一的目錄，便于集中存儲(chǔ)和訪(fǎng)問(wèn)。

這類(lèi)需要框架統(tǒng)一設(shè)置的參數(shù)，當(dāng)然應(yīng)該在/my_blog/settings.py中。在底部加上：

/my_blog/settings.py

...

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

MEDIA_ROOT和MEDIA_URL是用戶(hù)上傳文件保存、訪(fǎng)問(wèn)的位置：

在前面的Profile中我們?cè)O(shè)置了upload_to參數(shù)。有了這個(gè)參數(shù)，文件上傳后將自動(dòng)保存到項(xiàng)目根目錄的media文件夾中。 os.path.join(MEDIA_ROOT, "media/")指定了media文件夾的位置。

MEDIA_URL代表用戶(hù)通過(guò)URL來(lái)訪(fǎng)問(wèn)這個(gè)本地地址的URL。設(shè)置好這個(gè)參數(shù)后，用戶(hù)就可以通過(guò)解析url，很方便的獲取文件的地址。這樣做的好處是避免的硬編碼，讓代碼更容易維護(hù)。

Django框架擅長(zhǎng)的是對(duì)邏輯的處理，而對(duì)圖片這類(lèi)文件的處理則非常的耗時(shí)。因此在實(shí)際的生產(chǎn)環(huán)境中（即產(chǎn)品上線(xiàn)之后），通常是有專(zhuān)門(mén)的Web服務(wù)器來(lái)處理文件的訪(fǎng)問(wèn)。

而在開(kāi)發(fā)階段我們不會(huì)在意效率問(wèn)題，所以Django也提供了方法，讓開(kāi)發(fā)服務(wù)器能夠處理圖片。

在/my_blog/urls.py添加下面的語(yǔ)句：

/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路徑。

編寫(xiě)MTV

回顧一下，avatar的字段已經(jīng)在上一章寫(xiě)好了：

/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是日期格式化的寫(xiě)法，會(huì)最終格式化為系統(tǒng)時(shí)間。比如說(shuō)圖片上傳是2018年12月5日，則圖片會(huì)保存在/media/avatar/2018205/中。

注意ImageField字段不會(huì)存儲(chǔ)圖片本身，而僅僅保存圖片的地址。
記得用pip指令安裝Pillow。

表單類(lèi)在前面也寫(xiě)好了，不用修改：

/userprofile/forms.py

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

接著需要修改視圖，使之能夠?qū)D片進(jìn)行處理：

/userprofile/views.py

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

    # 修改本行
    # 上傳的文件保存在 request.FILES 中，通過(guò)參數(shù)傳遞給表單類(lèi)
    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"]

        ...

表單上傳的文件對(duì)象存儲(chǔ)在類(lèi)字典對(duì)象request.FILES中，因此需要修改表單類(lèi)的參數(shù)，將它一并傳遞進(jìn)去。

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

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

/templates/userprofile/edit.html

...

{% if profile.avatar %}
    
頭像

    
{% else %}
    
暫無(wú)頭像

{% endif %}





{% csrf_token %}
    
    

        
        
    

    
    ...

模板語(yǔ)法{% if ... %}判斷用戶(hù)是否上傳頭像。

標(biāo)簽用于顯示圖片內(nèi)容；在style屬性中規(guī)定了圖片的最大寬度并帶有一點(diǎn)的圓角。

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

添加標(biāo)簽用于上傳圖片。

啟動(dòng)服務(wù)器，刷新用戶(hù)信息頁(yè)面：

點(diǎn)擊選擇圖片，上傳一張圖片后點(diǎn)擊提交：

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

除了上傳，圖片的處理還包括驗(yàn)證格式、改變尺寸、更名、裁剪、美化等多種多樣的需求。
如果上傳的圖片重名，會(huì)導(dǎo)致報(bào)錯(cuò)嗎？請(qǐng)?jiān)囋嚳础?/p>

更改圖片僅僅會(huì)改變字段中存儲(chǔ)的url，并不會(huì)真正刪除圖片本身。因此在處理大容量文件時(shí)要小心，需要額外的方法進(jìn)行清理。
總結(jié)

本章學(xué)習(xí)了通過(guò)表單上傳文件的基礎(chǔ)知識(shí)。更加高級(jí)的文件處理手段還需在探索中不斷發(fā)掘。你還可以利用BootStrap知識(shí)，美化個(gè)人信息外觀，使它像一個(gè)完善的產(chǎn)品級(jí)頁(yè)面。

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

或Email私信我：dusaiphoto@foxmail.com

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

轉(zhuǎn)載請(qǐng)告知作者并注明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/42755.html

相關(guān)文章

  • Django搭建個(gè)人博客：給文章加個(gè)漂亮的標(biāo)題圖

    摘要：下一步就是修改視圖。判斷語(yǔ)句的條件有兩個(gè)博文的標(biāo)題圖不是必須的，剔除掉沒(méi)有標(biāo)題圖的文章，這些文章不需要處理圖片?？偨Y(jié)本章學(xué)習(xí)了如何上傳并處理文章的標(biāo)題圖，從此博客首頁(yè)就有了漂亮的外觀。 現(xiàn)在雖然博客的功能大都實(shí)現(xiàn)了，但是界面還是比較樸素，特別是首頁(yè)的文章列表幾乎全是文字，看多了難免疲勞。因此，給每個(gè)文章標(biāo)題配一張標(biāo)題圖，不僅美觀，用戶(hù)也能通過(guò)圖片快速了解文章內(nèi)容。實(shí)際上大部分社交網(wǎng)站也...

    taowen 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：擴(kuò)展用戶(hù)信息

    摘要：博客網(wǎng)站的用戶(hù)信息并不復(fù)雜，因此擴(kuò)展就足夠了?？梢栽谶@個(gè)基礎(chǔ)上，擴(kuò)展為一個(gè)美觀詳細(xì)的用戶(hù)信息頁(yè)面。當(dāng)然最好再給個(gè)人信息添加一個(gè)入口。沒(méi)有對(duì)用戶(hù)的登錄狀態(tài)進(jìn)行檢查?？偨Y(jié)本章使用一對(duì)一鏈接的方式，擴(kuò)展并更新了用戶(hù)信息。 可能你已經(jīng)發(fā)現(xiàn)了，Django自帶的User模型非常實(shí)用，以至于我們沒(méi)有寫(xiě)用戶(hù)管理相關(guān)的任何模型。 但是自帶的User畢竟可用的字段較少。比方說(shuō)非常重要的電話(huà)號(hào)碼、頭像等都...

    Eastboat 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：使用django-ckeditor富文本編輯器

    摘要：后面兩個(gè)編輯器自帶，不用單獨(dú)下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯(cuò)在前臺(tái)使用為了讓用戶(hù)在前臺(tái)也能使用富文本編輯器，還得對(duì)代碼稍加改動(dòng)。對(duì)于有些不喜歡的人來(lái)說(shuō)，甚至可以連博文都使用提供的富文本編輯器。 前面我們已經(jīng)實(shí)現(xiàn)了用Markdown語(yǔ)法寫(xiě)文章了。但是文章的評(píng)論用Markdown就不太合適了，你不能強(qiáng)求用戶(hù)也花時(shí)間去熟悉語(yǔ)法啊。另外評(píng)論中通常還有表情、帶顏色的字體...

    beanlam 評(píng)論0 收藏0

  • 使用 Vue2.js + Node.js 搭建一個(gè)小型的全棧項(xiàng)目

    摘要：大概過(guò)來(lái)一個(gè)多月，我決定兩路開(kāi)工。使用給前端寫(xiě)接口，配備后臺(tái)管理功能，先把后臺(tái)搭建好。大概幾天過(guò)后，后臺(tái)一些簡(jiǎn)單的功能實(shí)現(xiàn)后，就開(kāi)始用開(kāi)始搭建前臺(tái)，也一直在想做點(diǎn)什么比較好，于是就做了個(gè)豆瓣評(píng)分類(lèi)似的項(xiàng)目。 寫(xiě)在前面 由于最近公司業(yè)務(wù)不是很忙，空閑時(shí)間比較多，于是就在糾結(jié)Vue.js（之前就學(xué)習(xí)過(guò)）和Node.js先專(zhuān)研哪個(gè)比較好，最終選擇了先玩玩Node.js。經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)，就...

    freewolf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<