資訊專欄INFORMATION COLUMN
摘要：到目前為止我們的博客處理的都是文字。比如說圖片上傳是年月日，則圖片會(huì)保存在中。添加標(biāo)簽用于上傳圖片。除了上傳，圖片的處理還包括驗(yàn)證格式改變尺寸更名裁剪美化等多種多樣的需求。如果上傳的圖片重名，會(huì)導(dǎo)致報(bào)錯(cuò)嗎請?jiān)囋嚳础?/p>
到目前為止我們的博客處理的都是文字?，F(xiàn)代互聯(lián)網(wǎng)早就進(jìn)入了“讀圖”時(shí)代，圖片的維護(hù)、展示也就相當(dāng)重要。
上一章中預(yù)留了avatar字段，用來保存用戶上傳的頭像，現(xiàn)在我們來實(shí)現(xiàn)這個(gè)功能。
必要的設(shè)置圖片屬于一種媒體文件，它與靜態(tài)文件類似，需要設(shè)置一個(gè)統(tǒng)一的目錄，便于集中存儲(chǔ)和訪問。
這類需要框架統(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是用戶上傳文件保存、訪問的位置：
在前面的Profile中我們設(shè)置了upload_to參數(shù)。有了這個(gè)參數(shù)，文件上傳后將自動(dòng)保存到項(xiàng)目根目錄的media文件夾中。 os.path.join(MEDIA_ROOT, "media/")指定了media文件夾的位置。
MEDIA_URL代表用戶通過URL來訪問這個(gè)本地地址的URL。設(shè)置好這個(gè)參數(shù)后，用戶就可以通過解析url，很方便的獲取文件的地址。這樣做的好處是避免的硬編碼，讓代碼更容易維護(hù)。
Django框架擅長的是對邏輯的處理，而對圖片這類文件的處理則非常的耗時(shí)。因此在實(shí)際的生產(chǎn)環(huán)境中（即產(chǎn)品上線之后），通常是有專門的Web服務(wù)器來處理文件的訪問。
而在開發(fā)階段我們不會(huì)在意效率問題，所以Django也提供了方法，讓開發(fā)服務(wù)器能夠處理圖片。
在/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的字段已經(jīng)在上一章寫好了：
/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是日期格式化的寫法，會(huì)最終格式化為系統(tǒng)時(shí)間。比如說圖片上傳是2018年12月5日，則圖片會(huì)保存在/media/avatar/2018205/中。
注意ImageField字段不會(huì)存儲(chǔ)圖片本身，而僅僅保存圖片的地址。記得用pip指令安裝Pillow。
表單類在前面也寫好了，不用修改：
/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 中，通過參數(shù)傳遞給表單類
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"]
...
表單上傳的文件對象存儲(chǔ)在類字典對象request.FILES中，因此需要修改表單類的參數(shù)，將它一并傳遞進(jìn)去。
如果request.FILES中存在鍵為avatar的元素，則將其賦值給profile.avatar（注意保存的是圖片地址）；否則不進(jìn)行處理。
修改模板文件，添加代碼顯示、處理用戶的頭像：
/templates/userprofile/edit.html
...
{% if profile.avatar %}
頭像
{% else %}
暫無頭像
{% endif %}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/42755.html
摘要：下一步就是修改視圖。判斷語句的條件有兩個(gè)博文的標(biāo)題圖不是必須的，剔除掉沒有標(biāo)題圖的文章，這些文章不需要處理圖片?？偨Y(jié)本章學(xué)習(xí)了如何上傳并處理文章的標(biāo)題圖，從此博客首頁就有了漂亮的外觀。 現(xiàn)在雖然博客的功能大都實(shí)現(xiàn)了，但是界面還是比較樸素，特別是首頁的文章列表幾乎全是文字，看多了難免疲勞。因此，給每個(gè)文章標(biāo)題配一張標(biāo)題圖，不僅美觀，用戶也能通過圖片快速了解文章內(nèi)容。實(shí)際上大部分社交網(wǎng)站也...
摘要：博客網(wǎng)站的用戶信息并不復(fù)雜，因此擴(kuò)展就足夠了?？梢栽谶@個(gè)基礎(chǔ)上，擴(kuò)展為一個(gè)美觀詳細(xì)的用戶信息頁面。當(dāng)然最好再給個(gè)人信息添加一個(gè)入口。沒有對用戶的登錄狀態(tài)進(jìn)行檢查?？偨Y(jié)本章使用一對一鏈接的方式，擴(kuò)展并更新了用戶信息。 可能你已經(jīng)發(fā)現(xiàn)了，Django自帶的User模型非常實(shí)用，以至于我們沒有寫用戶管理相關(guān)的任何模型。 但是自帶的User畢竟可用的字段較少。比方說非常重要的電話號碼、頭像等都...
摘要：后面兩個(gè)編輯器自帶，不用單獨(dú)下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯(cuò)在前臺(tái)使用為了讓用戶在前臺(tái)也能使用富文本編輯器，還得對代碼稍加改動(dòng)。對于有些不喜歡的人來說，甚至可以連博文都使用提供的富文本編輯器。 前面我們已經(jīng)實(shí)現(xiàn)了用Markdown語法寫文章了。但是文章的評論用Markdown就不太合適了，你不能強(qiáng)求用戶也花時(shí)間去熟悉語法啊。另外評論中通常還有表情、帶顏色的字體...
摘要：大概過來一個(gè)多月，我決定兩路開工。使用給前端寫接口，配備后臺(tái)管理功能，先把后臺(tái)搭建好。大概幾天過后，后臺(tái)一些簡單的功能實(shí)現(xiàn)后，就開始用開始搭建前臺(tái)，也一直在想做點(diǎn)什么比較好，于是就做了個(gè)豆瓣評分類似的項(xiàng)目。 寫在前面 由于最近公司業(yè)務(wù)不是很忙，空閑時(shí)間比較多，于是就在糾結(jié)Vue.js（之前就學(xué)習(xí)過）和Node.js先專研哪個(gè)比較好，最終選擇了先玩玩Node.js。經(jīng)過一段時(shí)間的學(xué)習(xí)，就...
閱讀 1096·2021-11-16 11:44
閱讀 1377·2019-08-30 13:12
閱讀 2418·2019-08-29 16:05
閱讀 3082·2019-08-28 18:29
閱讀 918·2019-08-26 13:41
閱讀 3238·2019-08-26 13:34
閱讀 2607·2019-08-26 10:35
閱讀 942·2019-08-26 10:28
