到目前爲止我們的博客處理的都是文字。現代互聯網早就進入了“讀圖”時代，圖片的維護、展示也就相當重要。
上一章中預留了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 %}
<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">暫無頭像</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>
...
- 模板語法
{% if ... %}判斷用戶是否上傳頭像。 <img>標籤用於顯示圖片內容；在style屬性中規定了圖片的最大寬度並帶有一點的圓角。- 注意，表單必須設置
enctype="multipart/form-data"屬性，才能夠正確上傳圖片等文件。 - 添加
<input type="file" ...>標籤用於上傳圖片。
啓動服務器，刷新用戶信息頁面：
點擊選擇圖片，上傳一張圖片後點擊提交：
查看一下項目目錄，生成了新的文件夾media/avatar/20181205/，其中存儲了該頭像文件；在SQLiteStudio中查看avatar字段，其保存的是文件的url地址。
除了上傳，圖片的處理還包括驗證格式、改變尺寸、更名、裁剪、美化等多種多樣的需求。
如果上傳的圖片重名，會導致報錯嗎？請試試看。
更改圖片僅僅會改變字段中存儲的url，並不會真正刪除圖片本身。因此在處理大容量文件時要小心，需要額外的方法進行清理。
總結
本章學習了通過表單上傳文件的基礎知識。更加高級的文件處理手段還需在探索中不斷髮掘。你還可以利用BootStrap知識，美化個人信息外觀，使它像一個完善的產品級頁面。
- 有疑問請在杜賽的個人網站留言，我會盡快回復。
- 或Email私信我：[email protected]
- 項目完整代碼：Django_blog_tutorial
轉載請告知作者並註明出處。