15 подписчиков

Django - как сделать форму для загрузки фотографий

26 марта 202326 мар 2023

345

8 мин

Для создания формы загрузки фотографий в Django необходимо выполнить несколько шагов. В данной статье мы рассмотрим каждый из них подробно.

Данная статья предназначена для разработчиков, которые уже понимают основы Django и хотят реализовать на своем сайте форму для загрузки фотографий.

Если вам стало немного непонятно, весь код можно найти на GitHub здесь.

tech talk – я читаю.

Начинаем.

Шаг 1. Установка Django и Pillow

Перед началом работы необходимо установить Django и Pillow. Django - это веб-фреймворк, который позволяет создавать веб-приложения на языке Python. Pillow - это библиотека для обработки изображений, которая расширяет возможности стандартной библиотеки Python.

Подробнее о Django мы уже писали в статье.

Установка Django и Pillow может быть выполнена с помощью pip, установщика пакетов для Python. Для этого нужно ввести следующие команды в терминале:

pip install django

pip install pillow

Шаг 2. Создание модели для изображений

Создадим модель для хранения изображений в базе данных Django. Для этого необходимо добавить следующий код в файл приложения `tt_blog/models.py`. В нашем случае мы будем использовать следующие директории:
tech_talkt - название проекта
tt_blog - название приложения

`tt_blog/models.py`

from django.db import models

class Photo(models.Model):

title = models.CharField(max_length=255)

image = models.ImageField(upload_to='photos/')

uploaded_at = models.DateTimeField(auto_now_add=True)

def __str__(self):

return self.title

В данном коде мы создали модель Photo с двумя полями: title и image. Поле title предназначено для хранения названия изображения, а поле image - для самого изображения. Кроме того, мы определили метод str, который возвращает название изображения.

Шаг 3. Создание формы для загрузки изображений

Теперь создадим форму для загрузки изображений. Для этого добавим код ниже в файл `tt_blog/forms.py` в приложении.

`tt_blog/forms.py`

from django import forms

from .models import Photo

class PhotoForm(forms.ModelForm):

class Meta:

model = Photo

fields = ['title', 'image']

В данном коде мы создали форму PhotoForm, которая связана с моделью Photo. Форма имеет два поля: title и image, которые соответствуют полям модели Photo.

Шаг 4. Создание представления для формы загрузки изображений

Теперь создадим представление, которое будет отображать форму для загрузки изображений. Для этого нужно добавить код в файл `tt_blog/views.py` приложения.

`tt_blog/views.py`

from django.shortcuts import render

from .forms import PhotoForm

def upload_photo(request):

if request.method == 'POST':

form = PhotoForm(request.POST, request.FILES)

if form.is_valid():

form.save()

else:

form = PhotoForm()

return render(request, 'upload_photo.html', {'form': form})

В данном коде мы создали функцию upload_photo, которая обрабатывает запросы на загрузку изображений. Если запрос выполнен методом POST, то создается экземпляр формы PhotoForm с переданными POST и FILES данными. Затем мы проверяем, является ли форма действительной с помощью метода is_valid(). Если форма действительна, мы сохраняем данные с помощью метода save().

Если запрос не выполнен методом POST, то мы просто создаем экземпляр формы PhotoForm без каких-либо данных.

Затем мы вызываем функцию render(), чтобы отобразить шаблон upload_photo.html и передать объект формы в качестве контекста.

Теперь мы можем использовать эту функцию представления в URL-адресах Django, чтобы отображать форму загрузки изображений на нашей веб-странице.

Шаг 5. Настройка маршрутов

Чтобы пользователи могли загружать изображения через форму, необходимо настроить маршруты. Для этого необходимо отредактировать файл `tt_blog/urls.py` в приложении photos.

`tt_blog/urls.py`

from django.urls import path

from . import views

urlpatterns = [

path('upload_photo/', views.upload_photo, name='upload_photo'),

]

Здесь мы создали маршрут для представления upload_photo, который мы отределили на предыдущем шаге. Маршрут имеет путь 'upload_photo/', что означает, что наша форма будет доступна по адресу "http://<your_domain>/upload_photo/".

Шаг 6. Создание шаблона для формы

Теперь создадим шаблон для нашей формы. Для этого необходимо создать файл upload_photo.html в папке templates в приложении photos.

`tt_blog/templates/upload_photo.html`

{% extends 'base.html' %}

{% block content %}

<h2>Загрузить фото</h2>

<form method="post" enctype="multipart/form-data">

{% csrf_token %}

{{ form.as_p }}

<button type="submit">Загрузить</button>

</form>

{% endblock %}

В данном коде мы создали шаблон upload_photo.html, который наследует базовый шаблон base.html. Внутри блока {% block content %} мы создали форму, которая отправляет данные методом POST и использует тип данных multipart/form-data. В форме мы используем {% csrf_token %} для защиты от CSRF-атак. Кроме того, мы используем {{ form.as_p }} для отображения формы в виде списка параграфов. В конце формы мы добавляем кнопку для загрузки изображения.

Шаг 7. Обновление настроек проекта

Для того, чтобы наша форма работала корректно, необходимо обновить настройки проекта. Для этого необходимо добавить в файл проекта следующие строки.

`tech_talk/settings.py`

import os

MEDIA_URL = '/media/'

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

Здесь мы определили константы MEDIA_URL и MEDIA_ROOT, которые позволяют Django определять место хранения загруженных изображений.

Шаг 8: Обновление URL-адреса проекта

Наконец, необходимо обновить URL-адрес проекта. Для этого необходимо открыть файл urls.py в корневой папке проекта и добавить следующие строки:

`tech_talk/urls.py`

from django.conf.urls.static import static

from django.conf import settings

urlpatterns = [

# ... другие маршруты ...

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Здесь мы добавляем маршрут для медиа-файлов, которые будут загружаться пользователем. Мы импортируем функции static и settings из модуля django.conf.urls, после чего добавляем функцию static() в список urlpatterns. Эта функция добавляет URL-шаблон для маршрута к медиа-файлам, указывая URL-префикс MEDIA_URL и корневую директорию MEDIA_ROOT. Это позволяет Django обслуживать медиа-файлы в процессе разработки.

После этого наша форма для загрузки фотографий готова к использованию. Вы можете использовать ее в своих представлениях Django и добавить ее на свои веб-страницы.

На данном этапе, по адресу `http://localhost:8088/upload_photo/`, у нас должна получиться такая форма.

Итак, мы проделали большую работу и создали форму загрузки фотографий в Django. Но как же теперь обрабатывать загруженные изображения и отображать их на странице? Для этого нужно проделать еще несколько шагов.

Шаг 9: Обработка загруженных изображений

Для обработки загруженных изображений нам понадобится вспомогательная библиотека Pillow. Если вы еще не установили эту библиотеку, установите ее, выполнив команду:

pip install pillow

Теперь нам необходимо обновить представление upload_photo в файле views.py в приложении photos, чтобы обрабатывать загруженные изображения. Вот код, который вы можете использовать:

`tt_blog/views.py`

from django.shortcuts import render, get_object_or_404

from django.http import HttpResponseRedirect

from django.urls import reverse

from .forms import PhotoForm

from .models import Photo

def upload_photo(request):

if request.method == 'POST':

form = PhotoForm(request.POST, request.FILES)

if form.is_valid():

photo = form.save()

return HttpResponseRedirect(reverse('photo_detail', args=[photo.id]))

else:

form = PhotoForm()

return render(request, 'tt_blog/upload_photo.html', {'form': form})

def photo_detail(request, pk):

photo = get_object_or_404(Photo, pk=pk)

return render(request, 'tt_blog/photo_detail.html', {'photo': photo})

Здесь мы используем модуль HttpResponseRedirect для перенаправления пользователя на страницу photo_detail, которая будет отображать загруженное изображение. Если форма не прошла валидацию, мы просто отображаем форму заново.

В функции photo_detail мы используем функцию get_object_or_404, чтобы получить объект фотографии с заданным идентификатором (переданным в переменной pk). Если объект не найден, возвращается страница ошибки 404.

Затем мы вызываем функцию render(), чтобы отобразить шаблон photo_detail.html и передать объект фотографии в качестве контекста. Этот объект будет доступен в шаблоне под именем photo.

Обратите внимание, что мы также добавили импорт модели Photo в начало файла. Это необходимо для того, чтобы мы могли использовать модель Photo в функции photo_detail().

Шаг 10: Отображение загруженных изображений

Теперь создадим представление photo_detail, которое будет отображать загруженное изображение. Для этого создадим файл photo_detail.html в папке templates в приложении photos.

`tt_blog/templates/photo_detail.html`