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

上一章中預留了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 staticurlpatterns = [... ]#添加這行 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 = Profilefields = ('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私信我：dusaiphoto@foxmail.com
• 項目完整代碼：Django_blog_tutorial

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

轉載于:https://juejin.im/post/5c08a8ee5188257d5e395d52

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。