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

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

必要的設(shè)置

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

這類需要框架統(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/') 復(fù)制代碼

MEDIA_ROOT和MEDIA_URL是用戶上傳文件保存、訪問(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代表用戶通過(guò)URL來(lái)訪問(wèn)這個(gè)本地地址的URL。設(shè)置好這個(gè)參數(shù)后，用戶就可以通過(guò)解析url，很方便的獲取文件的地址。這樣做的好處是避免的硬編碼，讓代碼更容易維護(hù)。

Django框架擅長(zhǎng)的是對(duì)邏輯的處理，而對(duì)圖片這類文件的處理則非常的耗時(shí)。因此在實(shí)際的生產(chǎn)環(huán)境中（即產(chǎn)品上線之后），通常是有專門的Web服務(wù)器來(lái)處理文件的訪問(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 staticurlpatterns = [... ]#添加這行 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 復(fù)制代碼

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

編寫MTV

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

/userprofile/models.py... class Profile(models.Model):...avatar = models.ImageField(upload_to='avatar/%Y%m%d/', blank=True)... 復(fù)制代碼

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

注意ImageField字段不會(huì)存儲(chǔ)圖片本身，而僅僅保存圖片的地址。

記得用pip指令安裝Pillow。

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

/userprofile/forms.py... class ProfileForm(forms.ModelForm):class Meta:model = Profilefields = ('phone', 'avatar', 'bio') 復(fù)制代碼

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

/userprofile/views.py... @login_required(login_url='/userprofile/login/') def profile_edit(request, id):...# 修改本行# 上傳的文件保存在 request.FILES 中，通過(guò)參數(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"]... 復(fù)制代碼

• 表單上傳的文件對(duì)象存儲(chǔ)在類字典對(duì)象request.FILES中，因此需要修改表單類的參數(shù)，將它一并傳遞進(jìn)去。
• 如果request.FILES中存在鍵為avatar的元素，則將其賦值給profile.avatar（注意保存的是圖片地址）；否則不進(jìn)行處理。

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

/templates/userprofile/edit.html...{% if profile.avatar %}<div class="col-md-4">頭像</div><img src="{{ profile.avatar.url }}" style="max-width: 20%; border-radius: 15%;" class="col-md-4"> {% else %}<h5 class="col-md-4">暫無(wú)頭像</h3> {% endif %} <br> <br> <form ... enctype="multipart/form-data">{% csrf_token %}<!-- avatar --><div class="form-group"><label for="avatar">上傳頭像</label><input type="file" class="form-control-file" name="avatar" id="avatar"></div>... 復(fù)制代碼

• 模板語(yǔ)法{% if ... %}判斷用戶是否上傳頭像。
• <img>標(biāo)簽用于顯示圖片內(nèi)容；在style屬性中規(guī)定了圖片的最大寬度并帶有一點(diǎn)的圓角。
• 注意，表單必須設(shè)置enctype="multipart/form-data"屬性，才能夠正確上傳圖片等文件。
• 添加<input type="file" ...>標(biāo)簽用于上傳圖片。

啟動(dòng)服務(wù)器，刷新用戶信息頁(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)告知作者并注明出處。

轉(zhuǎn)載于:https://juejin.im/post/5c08a8ee5188257d5e395d52

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Django搭建个人博客：上传头像图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。