快捷導(dǎo)航

Django如何實(shí)現(xiàn)上傳圖片功能

更新時(shí)間：2019年08月16日 10:45:43 作者：希希里之海

這篇文章主要介紹了Django如何實(shí)現(xiàn)上傳圖片功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

很多時(shí)候我們要用到圖片上傳功能，如果圖片一直用放在別的網(wǎng)站上，通過(guò)加載網(wǎng)址的方式來(lái)顯示的話其實(shí)也挺麻煩的，我們通過(guò)使用 django-filer 這個(gè)模塊實(shí)現(xiàn)將圖片文件直接放在自己的網(wǎng)站上。

感興趣的同學(xué)可以看下官方介紹：https://github.com/divio/django-filer

1. 使用 pip 安裝。

pip install django-filer

這個(gè)模塊需要 django-mptt, easy_thumbnails, django-polymorphic 以及 pillow 這些依賴包, 不過(guò)安裝django-filer的時(shí)候 pip 都會(huì)自動(dòng)幫我們裝好這些。

2. django-filer 配置。

在 settings.py 中加入以下內(nèi)容：

INSTALLED_APPS = [
  # 圖片上傳模塊 django-filer
  'easy_thumbnails',
  'filer',
  'mptt',
]

# 支持視網(wǎng)膜高分辨率設(shè)備
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',
)

# 存放圖片文件夾設(shè)置
FILER_STORAGES = {
  'public': {
    'main': {
      'ENGINE': 'filer.storage.PublicFileSystemStorage',
      'OPTIONS': {
        'location': '項(xiàng)目路徑/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': '項(xiàng)目路徑/media/filer_thumbnails',
        'base_url': '/media/filer_thumbnails/',
      },
    },
  },
  'private': {
    'main': {
      'ENGINE': 'filer.storage.PrivateFileSystemStorage',
      'OPTIONS': {
        'location': '項(xiàng)目路徑/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': '項(xiàng)目路徑/smedia/filer_thumbnails',
        'base_url': '/smedia/filer_thumbnails/',
      },
    },
  },
}
# 指定 MEDIA_URL 的位置
MEDIA_URL = '/media/'
MEIDA_ROOT = '項(xiàng)目路徑/media/'

在上述設(shè)置中，location 是文件真正存放的文件夾地址，而 base_url 是顯示時(shí)要指定的靜態(tài)文件網(wǎng)址。

在 urls.py 中加入以下程序代碼，才能把上傳的圖像文件當(dāng)在靜態(tài)文件處理：

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)

上述設(shè)置完成后，同步數(shù)據(jù)庫(kù) ./manage.py migrate，讓模塊加上需要的數(shù)據(jù)表。執(zhí)行 ./manage.py collectstatic，刷新靜態(tài)文件，加載 django-filer 自己的 CSS 和 Javascript 文件。我們便能在 admin 管理頁(yè)面看到多出的兩個(gè)數(shù)據(jù)表。

接著我們就可以在 Folders 數(shù)據(jù)表中進(jìn)行新建文件夾，上傳文件以及刪除文件夾和文件等操作。

3. 把 django-filer 的圖像文件添加到數(shù)據(jù)表中

使用 filer 模塊提供的 FilerImageField 字段，將上傳圖像文件的功能整合到建立的數(shù)據(jù)項(xiàng)中。

在 models.py 文件中添加：

from filer.fields.image import FilerImageField

并將需要放置圖片的數(shù)據(jù)表中的 image 變量改為：

image = FilerImageField(related_name='product_image')

刪除 migrations 下除 __init__.py 的其他文件和 db.sqlite3 文件，重新執(zhí)行 ./manage.py makemigrations 和 ./manage.pymigrate ，刷新 admin 管理頁(yè)面，進(jìn)入 image 字段的數(shù)據(jù)項(xiàng)，便可以看到 image 字段多了上傳文件的功能。