Djangoでmedia_root配下のディレクトリにファイルアップロードを実装する手順・考え方

▼この記事をSNSでシェアする▼

スポンサーリンク

スポンサーリンク

Djangoのアプリケーションでファイルをアップロードして、サーバー上の特定の場所に保存して、DBにそのパスを保存する。

今回はDjangoのアプリケーションでそれを実現します。

UIでのイメージ

初期表示

「upload」ボタンをクリックして、画像選択

画像が選択できたら「upload」ボタンをクリック

入力したdescriptionと画像が表示される

処理内容

処理内容をイメージすると、実装の理解が深まる気がするので記述

  1. アップした画像をHTML上からフォームに格納
  2. 「upload」ボタンをクリックすることで、DBに画像データを格納
  3. サーバ上のmediaディレクトリに画像の実態が保存され、DBにはそのパスが保存される
  4. プレビュー画面では、DBの画像パスをimgのsrcタグに指定することで表示される

実装

ポイントを抜粋して紹介します。

詳細は下記のソースでご確認ください

ソースコード

settings.py

アップロードされた画像の実態を保存するmediaディレクトリ(名前は任意)の設定をする

urls.py

作成したmediaディレクトリの画像を表示できるようにurls.pyを設定する

これでmedia_root以下のディレクトリの画像のパスを解決できるようになる

ちなみにアプリ固有のurls.pyの設定はこちら

models.py

画像のデータ

description(説明)、画像のパスを格納するモデルを先に作ります。

uploaded_atは更新日時が自動でセットされるように設定

5行目に注目。

あとでmodelを利用してformを生成するのですが、ここでupload_toを指定すると、

descriptionの値に主キー制約があり、重複する値を指定するとバリデーションエラーが出る

descriptionをキーに正確に画像データを表示するためにこのようにしました。

※いまいちフォームの画像データを表示する方法がわからなかったのと、この先画像処理した画像も一緒に表示することを見据えこういう処理にしています。

forms.py

作成したImage modelを利用してHTML上にセットするフォームを作る

views.py

画面に表示するオブジェクトの設定をします

  • uploadアクションをpostメソッドで呼ぶと、form.save()で保存されたDBの最新の画像データをitem変数に格納し、preview.htmlに渡している
  • uploadアクションをgetメソッドで呼ぶと、フォームが初期化されupload.htmlが保存される

DBのdescriptionとフォームのdescriptionの一致する画像データをitem変数に格納する

upload.html(アップする画面)

クロスサイトリフォージェリ対策用のトークンを付与し、enctypeを適切に指定し、フォームを指定。

form.as_pの部分は、フォームAPIによりフォームの各要素がpタグで記述されます。

preview.html(アップ後に表示する画面)

itemに渡したdescriptionの内容を表示し、DBの画像パスにある画像を表示する

これから

次の段階としては、アップされた画像をもとに画像加工したものを表示して、ダウンロードできるようにしたいと思っています

Jupyter Notebookでいろいろためして良さそうなものを取り入れていきたい。

今回下記の記事が参考になりました

ありがとうございます。

https://ymgsapo.com/file-upload/

スポンサーリンク


関連記事

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(ITコンサル)
◆santaka(SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する