Django 實現上傳圖片功能

　　不少時候咱們要用到圖片上傳功能，若是圖片一直用放在別的網站上，經過加載網址的方式來顯示的話其實也挺麻煩的，咱們經過使用 django-filer 這個模塊實現將圖片文件直接放在本身的網站上。

感興趣的同窗能夠看下官方介紹：https://github.com/divio/django-filer

 

1. 使用 pip 安裝。

pip install django-filer

這個模塊須要 django-mptt, easy_thumbnails, django-polymorphic 以及 pillow 這些依賴包,  不過安裝django-filer的時候 pip 都會自動幫咱們裝好這些。

 

2. django-filer 配置。

在 settings.py 中加入如下內容：

INSTALLED_APPS = [ # 圖片上傳模塊 django-filer
    'easy_thumbnails', 'filer', 'mptt', ] # 支持視網膜高分辨率設備
THUMBNAIL_HIGH_RESOLUTION = True # 處理縮列圖
THUMBNAIL_PROCESSORS = ( 'easy_thumbnails.processors.colorspace', 'easy_thumbnails.processors.autocrop', 'filer.thumbnail_processors.scale_and_crop_with_subject_location', 'easy_thumbnails.processors.filters', ) # 存放圖片文件夾設置
FILER_STORAGES = { 'public': { 'main': { 'ENGINE': 'filer.storage.PublicFileSystemStorage', 'OPTIONS': { 'location': '項目路徑/media/filer', 'base_url': '/media/filer/', }, 'UPLOAD_TO': 'filer.utils.generate_filename.randomized', 'UPLOAD_TO_PREFIX': 'filer_public', }, 'thumbnails': { 'ENGINE': 'filer.storage.PublicFileSystemStorage', 'OPTIONS': { 'location': '項目路徑/media/filer_thumbnails', 'base_url': '/media/filer_thumbnails/', }, }, }, 'private': { 'main': { 'ENGINE': 'filer.storage.PrivateFileSystemStorage', 'OPTIONS': { 'location': '項目路徑/smedia/filer', 'base_url': '/smedia/filer/', }, 'UPLOAD_TO': 'filer.utils.generate_filename.randomized', 'UPLOAD_TO_PREFIX': 'filer_public', }, 'thumbnails': { 'ENGINE': 'filer.storage.PrivateFileSystemStorage', 'OPTIONS': { 'location': '項目路徑/smedia/filer_thumbnails', 'base_url': '/smedia/filer_thumbnails/', }, }, }, } # 指定 MEDIA_URL 的位置
MEDIA_URL = '/media/' MEIDA_ROOT = '項目路徑/media/'

在上述設置中，location 是文件真正存放的文件夾地址，而 base_url 是顯示時要指定的靜態文件網址。

 

在 urls.py 中加入如下程序代碼，才能把上傳的圖像文件當在靜態文件處理：

from django.conf import settings from django.conf.urls.static import static urlpatterns = [ # others urls ...
    url(r'^files/', include('filer.urls')), # ...
] urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEIDA_ROOT)

 

上述設置完成後，同步數據庫 ./manage.py migrate，讓模塊加上須要的數據表。執行 ./manage.py collectstatic，刷新靜態文件，加載 django-filer 本身的 CSS 和 Javascript 文件。咱們便能在 admin 管理頁面看到多出的兩個數據表。

接着咱們就能夠在 Folders 數據表中進行新建文件夾，上傳文件以及刪除文件夾和文件等操做。

 

3. 把 django-filer 的圖像文件添加到數據表中

使用 filer 模塊提供的 FilerImageField 字段，將上傳圖像文件的功能整合到創建的數據項中。

在 models.py 文件中添加：

from filer.fields.image import FilerImageField

 

並將須要放置圖片的數據表中的 image 變量改成：

image = FilerImageField(related_name='product_image')

 

刪除 migrations 下除 __init__.py 的其餘文件和 db.sqlite3 文件，從新執行 ./manage.py makemigrations 和  ./manage.pymigrate ，刷新 admin 管理頁面，進入 image 字段的數據項，即可以看到 image 字段多了上傳文件的功能。

咱們即可以經過點擊 Choose Files 上傳文件了。

 

上傳圖片後，將 html 文件中 img 地址改成

<img src='{{product.image.url}}'>

即可以正確顯示圖片了。