スクリプトのお勉強 技術

Djangoアプリサンプル – 画像ファイルアップロード + 顔モザイク(画像アップロード編)

投稿日:2019年6月12日 更新日:

仕事で使用している、Djangoについて、サンプルを作成してみようと思います。ここでは、画像ファイルのアップロードと顔モザイクを行うwebアプリを作成してみようと思います。

この記事ではファイルアップロードを扱います。

Django テンプレート

Djangoアプリのサンプルを作るうえで、何らかのテンプレートを基にして作成しようと考えました。

その方が早い、というのもありますが、毎回ゼロから作るのも大変なだけだからです。

django-starter-template

以下のテンプレートを使用してみました。
見たところ、シンプルでコードを追加しやすいためです。

https://github.com/fasouto/django-starter-template

ただ、仕事で使うなら、もう少し、CSS(SASS)が追加済みだったりするといいかもしれません。

プロジェクト作成準備

一つ上のディレクトリ(make_project)で、django-adminコマンドを起動できるよう設定し、 実際に使用するプロジェクト(django_upload)を作成します。

### 作成準備
$ mkdir make_project
$ cd make_project
$ python3.6 -m venv ./venv
$ source venv/bin/activate
$ pip install django
$ django-admin startproject --template=https://github.com/fasouto/django-starter-template/archive/master.zip --extension=py,md,html,txt django_upload
### ここから実際のプロジェクト作成
$ cd django_upload
### ImageField用
$ pipenv install pillow
$ export SECRET_KEY='phil-dunphy98!-bananas12'
$ export DJANGO_SETTINGS_MODULE="django_upload.settings.production"
$ pipenv run python manage.py runserver 0.0.0.0:18889

MEDIA_ROOTは設定済みだったので、設定は追加していません。

まずはファイルアップロード

テンプレートができたら、あとは以下を追加します。

upload_formのURLを準備します。upload_formという行を追加しました。

app/base/urls.py

urlpatterns = [
    url(r'^$', home, name='home'),
    url(r'upload_form$', upload_file, name='upload_form'),
]

views.pyはテンプレートで用意してあるので、それに以下を追記しました。

app/base/views.py

def upload_file(request):
    if request.method == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid():
            download_url = form.save()
            context = {
                'download_url': download_url,
                'form': form,
            }
            return render(request, 'base/upload.html', context)
    else:
        form = UploadForm()
    return render(request, 'base/upload.html', {'form': form})

forms.pyは新規で準備しました。

app/base/forms.py

rom django import forms
from django.core.files.storage import default_storage


class UploadForm(forms.Form):
    file = forms.ImageField(label='画像ファイル')

    def save(self):
        upload_file = self.cleaned_data['file']
        file_name = default_storage.save(upload_file.name, upload_file)
        return default_storage.url(file_name)

apps/base/views.pyでrenderしている、テンプレートは以下です。

apps/base/templates/base/upload.html

<form action="" method="POST" enctype="multipart/form-data">
  {{ form.as_p }}
  {% csrf_token %}
  <button type="submit">送信</button>
</form>

{% if download_url %}
<a href="{{ download_url }}">{{ download_url }}</a>
{% endif %}

起動

以下で起動します。

$ pipenv run python manage.py runserver 0.0.0.0:18889

アップロード画面

アップロード画面です。

アップロード後

/media/DSC_0718.JPGをクリックすると画像が出てきます。

おわりに

とりあえず画像アップロード方法だけ説明しました。

次は、アップロードした画像を加工する方法を書いてみます。

アップロードの参考

https://docs.djangoproject.com/en/2.2/topics/http/file-uploads/
https://ymgsapo.com/2018/11/05/show-image-imagefield/

-スクリプトのお勉強, 技術

執筆者:

関連記事

暗号モードによる処理時間の違いを測定してみた

はじめに 前回、AESで暗号化する実装をしてみた際、知らない暗号モードが増えたなと思いました。 なので、どの暗号モードを使用すべきかの、判定材料の一つとして、代表的な暗号モードの処理速度を簡単に計って …

神奈川県横浜市神奈川区のワクチン接種地図作った

作ってみた。東白楽駅を真ん中にしてみました。なんとなく真ん中な感じなので。 データ元 以下のテキストデータからゴニョゴニョしてます。 https://www.city.yokohama.lg.jp/k …

SPAMチェック for OCN の開発

前回、Thunderbirdプラグインの概要を書いたので、今回は開発したプラグインについて書きます。 SPAMチェック for OCNとは 以下の機能を持ったThunderbirdのアドオン(プラグイ …

svelteのUIライブラリを使用してみる(TreeView)

前回の続きで、まずは、TreeViewを実現してみます。 Carbon Components Svelte svelteのUIライブラリにCarbon Components Svelteを使用してみま …

CentOS7 + Django2.2 + uwsgi + nginx 連携方法

Djangoとnginx連携方法 以前はApache経由で連携しましたが、今回はnginxと連携する方法を記述します。 環境 設定した環境は以下です。 OS: CentOS7Python3.6.8 ( …

google オプトアウト Click here to opt-out.