django画像アップロード機能を実装する方法

djangoで画像をアップロードする機能を紹介します。

あの有名なインスタグラムも実はdjangoで作られていたって知っていましたか?

このようなアップロード機能を利用しているのかもしれません。

こんな人向け

・画像アップロード機能を実装したい

・プロフィールの画像アップロードを実装したい

環境

・OS:Mac

・django 2.2

・python3.8

それでは順番に説明をしていきます。

画像アップロードの実装

画像処理ライブラリ(pillow)のインストール

画像処理を行うpillowと言うライブラリをインストールします。

ヒロヤンの場合はpipenvに環境を作っておりますのでこれでインストールします。

pipに直接入れたい人なら下記コマンドでインストールして下さい。

settingsに追記をする

通常のデータの取り扱いと違い、画像を扱わなければならないので画像の保存先を設定ファイルに追記する必要があります。

settings.py

上記の追記とは別にsettings.pyファイルの中段のやや上あたりに下記TEMPLATESというコードがあるかと思います。

このTEMPLATES変数内部にこちらのコードも忘れずに記入をします。

mediaディレクトリを作成

settingsに画像保存パスの指定ができたら実際に保存をするディレクトリを作成します。

場所は、上記のsettings.pyが含まれているディレクトリと同じ並びにmediaディレクトリと、その下にimagesディレクトリを作成します。

media/images/

urls.pyに画像に対するpathを追加

urls.pyにあるurlpattarnsのリストオブジェクトの最後に +staticで始まる1行を追加します。

データ定義

画像を保存するためのmodelsを定義します。

重要なのは、upload_toに画像のパスコードを記入することです。

ここではプロフィール画像ということで、UserProfileとモデル名を定義し、フィールドにavatorを設定します。

それではいつものようにマイグレーションファイルを作成。

そして流し込みます。

htmlにフォームタグ記載

アップロードするためのフォームタグを記載します。

sample.html

いつものformと違うのは必ず画像ファイルを扱う enctype=”multipart/form-data” をタグ内に記載をすることです。

formsを作成

ImageFieldの記入をします。

viewsを作成

実施に画像がアップロードされた時の処理を書きます。

最上段ではforms.pyとmodesl.pyからクラスを読み込むコードを書きます。

5行目に、request.POSTに加えてrequest.FILESの記載を忘れずに。

以上で完了です。

実際にアップロードを実行

それでは実際に画像をアップロードしてみます。

何もしていない状態

画像を選択した状態

画像を選択したらRegisterをクリックしてみます。

images/ディレクトリに画像が保存されました。


最後に

djangoで画像アップロード機能を無事作成できましたが、ただ作成しただけではセキュリティリスクが多々あります。

続きはこちらでも紹介していますので、興味のある方はトライしてみてください。

また、画像アップロードの際にリサイズやサニタイズ処理をかけたいことはありませんか?そちらのコードも以下リンク先で紹介しております。

プログラミング学習を効率良く進めるには…

私ヒロヤンがプログラミングを始めた頃は以下のような感じでした。

何から手をつけていいのか、わからない。

プログラミングを始めてみたけど、エラーが解決できない。

そしてネットで調べていくうちに膨大な時間が過ぎていきました。

私ヒロヤンの実体験より、プログラミングを効率的に学ぶために大切なことは以下のことだと考えています。

1. いつまでもダラダラとやらないで、目標を決定して短期集中する

2. マンツーマンで、わからない箇所は直ぐに質問をして即レスをもらう

.proでは私ヒロヤンが学習してきたプログラミング経験0からのpython/django、その他webサイト・サービス開発のコースが用意されています。

カウンセリング自体は無料なので話を聞いてみるだけでもいかがでしょうか?

また以下のリンク先ではdjangoを教えてくれるスクールをまとめ紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です