スクリプトのお勉強 技術

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/

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

執筆者:

関連記事

vscodeのRemote Developmentで「権限がない」と怒られた時

小ネタです。 vscodeのRemote Developmentにてパスワードなしログイン vscodeは時々使うのですが、リモート開発するのにRemote Developmentが便利なので使ってま …

Nuxt.jsのFormで入力/確認/完了フォームを作成してみた(その2)

前回の記事の続きです。以下について書いていきます。この記事で終わりのはず? バリデーション機能(主にIPアドレスのバリデーション追加)画面 バリデーション機能 バリデーション機能は、vee-valid …

no image

GLP-1 メディカルダイエット 58日目

メディカルダイエットして58日目の記録をしておこうと思います。 9回目。 今回は左腹(中部)に打ちました。痛いのはいまだに慣れない。。 土曜にゲットしてした 渋谷に行ってきたが、そこの医院には相変わら …

go 1.16 でviperを使って設定ファイルを読みだすプログラムを作ってみた

他にたくさんあるけど こんな感じの内容はたくさんあると思いますが、、goの初心者がなんとなくgoの手習いとして、まずは設定ファイルを読みだすことをしてみようと思いました。 go動作環境 windows …

Svelte(Carbon Components Svelte) + Python(FastAPI)でWebアプリを作る

Svelte用のサンプルとして、Carbon Components SvelteのTreeViewを試用してファイルツリーを表示し、各データはAPIとして読み出し、編集するWebアプリケーションを実装 …

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