Djangoで画像アップローダを作る

画像をWEBアプリで管理するには？

以下の２つの方法があります。

• ①画像データそのものをデータベースに保存。
• ②画像のパスをデータベースに保存。

①の画像データそのものをデータベースに保存することは可能ですが、容量がどんどん増大してしまいます。②の方法を取るパターンが一般的です。

保存場所の作成

画像をWEBアプリにアップロードする場合、メディアファイルを格納するディレクトリ（メディアルートと呼ぶ）が必要になります。開発環境ではプロジェクトルート（私の例ではpj1）直下にmediaというディレクトリを作りメディアルートとするのが一般的です。

URL設計

仕様

①トップページです。「ドメイン/」にアクセスします。画面右上にログインページへのリンクがあります。

②画像アップロードページです。「ドメイン/photoupload」にアクセスします。

③「参照：」ボタンをクリックすると、画像選択が表示されます。これはhtmlのコードで可能です。

④画像選択が完了すると、ファイル名が参照ボタンの横に表示されます。最後に「投稿」ボタンをクリックしてアップロードを実行します。

⑤djangoプロジェクトの「media/images」ディレクトリに画像がアップロードされます。

⑥postbackが成功すると、index（トップページ）にリダイレクトします。

準備

当サイトでは、Vagrantでゲスト環境（仮想環境）を作ってDjangoを動かいていますが、それ以外の環境でも操作方法はだいたい同じです。

①Djangoプロジェクトを生成します。

→VagrantのDjangoで作るWebアプリケーション(その1 プロジェクト生成)

②Djangoアプリケーションを作ります。

→VagrantのDjangoで作るWebアプリケーション(その2 プロジェクトの初期設定)

画像アップローダ機能概要

①以下のようなDjangoアプリ構成を作ります。プロジェクト名が「pj1」で、アプリケーション名が「users」です。プロジェクトの設定は済ませたものとします。赤字のファイルは、今回変更する部分です。

Pillowインストール

①ImageFieldの使用にPillowが必要なのでPillowもインストール済みの前提です。以下のコマンドでインストールします。

pip install Pillow==5.0.0

プロジェクト/settings.py

pj1ディレクトリ下のsettings.pyを変更します。

①画像ファイルのパスのルート用に「MEDIA_ROOT」を設定します。また、 画像ファイルのURLのルート用に「MEDIA_URL」を定義します。

STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

プロジェクト/urls.py

pj1ディレクトリ下のurls.pyを変更します。

①ユーザーが画像にアクセス出来るように、プロジェクトのURLパターンにメディアの設定を加えます。

from django.conf.urls import url
from django.contrib import admin

urlpatterns = [
url(r'^admin/', admin.site.urls),
]

# 以下を定義
from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

モデルの定義

モデルを定義します。

①Photoというモデルを定義します。

myapp/models.py
from django.db import models

class Photo(models.Model):
image = models.ImageField(upload_to='images/', verbose_name="画像", )

②定義後は必ずマイグレーションを実行します。

python manage.py makemigrations
python manage.py migrate

フォームの定義

フォームを定義します。

①アプリケーションのディレクトリにforms.pyを作成し定義します。

from django import forms

class PhotoForm(forms.Form):

    image = forms.ImageField()

アプリケーション/views.py

アプリケーション（users）のビューに処理を書きます。

from django.shortcuts import render, redirect
from .forms import PhotoForm
from .models import Photo

def index(request):
  context = {
    'photos': Photo.objects.all(),
  }

def photoupload(req):
       if req.method == 'GET':
        return render(req, 'users/photoupload.html', {
        'form': PhotoForm(),
   })

    elif req.method == 'POST':
        form = PhotoForm(req.POST, req.FILES)
        if not form.is_valid():
           raise ValueError('invalid form')

        photo = Photo()
        photo.image = form.cleaned_data['image']
        photo.save()

        return redirect('/')

def index(request):
  context = {
    'photos': Photo.objects.all(),
  }

テンプレート作成

htmlのテンプレートファイルを作成します。

<form action="{% url 'index' %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="投稿">
</form># アップローダ

アプリケーション/urls.py

①urls.pyに、以下のurlを設定します。

from django.conf.urls import url                                                   
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^photoupload/$', views.photoupload, name='photoupload'),
]

画像の表示

アップロードした画像を表示します。

①views.pyでindexにコンテキストを指定しました。あとはhtml側で以下のように記述します。

{% for p in photos %}
    <div>
        <img src="{{ p.image.url }}" />                                           
    </div>
{% endfor %}

次回

コメントに対するコメントのためのフォームを作ります。

→コメント投稿に対してコメント投稿するページを作る（Django）