{"draftJsState":{"blocks":[{"data":{"image":{"id":"64203c3d5b71617e5fa7c0fa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"created by tech talk","type":"atomic:image","key":"q8vk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для создания формы загрузки фотографий в Django необходимо выполнить несколько шагов. В данной статье мы рассмотрим каждый из них подробно.","type":"unstyled","key":"f399e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данная статья предназначена для разработчиков, которые уже понимают основы Django и хотят реализовать на своем сайте форму для загрузки фотографий.","type":"unstyled","key":"47udm"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":12,"offset":58}],"inlineStyleRanges":[],"text":"Если вам стало немного непонятно, весь код можно найти на GitHub здесь.","type":"unstyled","key":"febjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"tech talk – я читаю.","type":"unstyled","key":"fb1k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начинаем.","type":"unstyled","key":"eutuf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Шаг 1. Установка Django и Pillow","type":"unstyled","key":"evj0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед началом работы необходимо установить Django и Pillow. Django - это веб-фреймворк, который позволяет создавать веб-приложения на языке Python. Pillow - это библиотека для обработки изображений, которая расширяет возможности стандартной библиотеки Python.","type":"unstyled","key":"2h3fu"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":8,"offset":33}],"inlineStyleRanges":[],"text":"Подробнее о Django мы уже писали в статье.","type":"unstyled","key":"cu6ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка Django и Pillow может быть выполнена с помощью pip, установщика пакетов для Python. Для этого нужно ввести следующие команды в терминале:","type":"unstyled","key":"9thjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pip install django","type":"blockquote","key":"e7gdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pip install pillow","type":"blockquote","key":"ao4ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Шаг 2. Создание модели для изображений","type":"unstyled","key":"b189f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":266,"style":"BOLD"}],"text":"Создадим модель для хранения изображений в базе данных Django. Для этого необходимо добавить следующий код в файл приложения `tt_blog/models.py`. В нашем случае мы будем использовать следующие директории:\ntech_talkt - название проекта\ntt_blog - название приложения\n\n`tt_blog/models.py`","type":"unstyled","key":"dtnkt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.db import models","type":"blockquote","key":"1qele"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"eucrt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class Photo(models.Model):","type":"blockquote","key":"6hajm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"title = models.CharField(max_length=255)","type":"blockquote","key":"b5dek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"image = models.ImageField(upload_to='photos/')","type":"blockquote","key":"6lsup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"uploaded_at = models.DateTimeField(auto_now_add=True)","type":"blockquote","key":"drc5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"def __str__(self):","type":"blockquote","key":"85mss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return self.title","type":"blockquote","key":"nlli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном коде мы создали модель Photo с двумя полями: title и image. Поле title предназначено для хранения названия изображения, а поле image - для самого изображения. Кроме того, мы определили метод str, который возвращает название изображения.","type":"unstyled","key":"a8u9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Шаг 3. Создание формы для загрузки изображений","type":"unstyled","key":"i0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим форму для загрузки изображений. Для этого добавим код ниже в файл `tt_blog/forms.py` в приложении.","type":"unstyled","key":"ie1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"`tt_blog/forms.py`","type":"unstyled","key":"1h8e2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django import forms","type":"blockquote","key":"elsuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from .models import Photo","type":"blockquote","key":"1qq77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dvdg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class PhotoForm(forms.ModelForm):","type":"blockquote","key":"9snum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class Meta:","type":"blockquote","key":"9gefg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"model = Photo","type":"blockquote","key":"3em7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fields = ['title', 'image']","type":"blockquote","key":"186f7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном коде мы создали форму PhotoForm, которая связана с моделью Photo. Форма имеет два поля: title и image, которые соответствуют полям модели Photo.","type":"unstyled","key":"anupt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"Шаг 4. Создание представления для формы загрузки изображений","type":"unstyled","key":"ag0a6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим представление, которое будет отображать форму для загрузки изображений. Для этого нужно добавить код в файл `tt_blog/views.py` приложения.","type":"unstyled","key":"3rmiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"`tt_blog/views.py`","type":"unstyled","key":"85aqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.shortcuts import render","type":"blockquote","key":"2j6lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from .forms import PhotoForm","type":"blockquote","key":"1rqr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"c75bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"def upload_photo(request):","type":"blockquote","key":"2to2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if request.method == 'POST':","type":"blockquote","key":"7ei2u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"form = PhotoForm(request.POST, request.FILES)","type":"blockquote","key":"r764"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if form.is_valid():","type":"blockquote","key":"etk7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"form.save()","type":"blockquote","key":"bd0h9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"else:","type":"blockquote","key":"ed9g1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"form = PhotoForm()","type":"blockquote","key":"1j5nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return render(request, 'upload_photo.html', {'form': form})","type":"blockquote","key":"b09du"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном коде мы создали функцию upload_photo, которая обрабатывает запросы на загрузку изображений. Если запрос выполнен методом POST, то создается экземпляр формы PhotoForm с переданными POST и FILES данными. Затем мы проверяем, является ли форма действительной с помощью метода is_valid(). Если форма действительна, мы сохраняем данные с помощью метода save().","type":"unstyled","key":"5opqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если запрос не выполнен методом POST, то мы просто создаем экземпляр формы PhotoForm без каких-либо данных.","type":"unstyled","key":"2eler"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем мы вызываем функцию render(), чтобы отобразить шаблон upload_photo.html и передать объект формы в качестве контекста.","type":"unstyled","key":"7eqrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы можем использовать эту функцию представления в URL-адресах Django, чтобы отображать форму загрузки изображений на нашей веб-странице.","type":"unstyled","key":"4f5ea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Шаг 5. Настройка маршрутов","type":"unstyled","key":"bufmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы пользователи могли загружать изображения через форму, необходимо настроить маршруты. Для этого необходимо отредактировать файл `tt_blog/urls.py` в приложении photos.","type":"unstyled","key":"6n2il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"`tt_blog/urls.py`","type":"unstyled","key":"b0nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.urls import path","type":"blockquote","key":"2vg40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from . import views","type":"blockquote","key":"2p5fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4un3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"urlpatterns = [","type":"blockquote","key":"25g82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"path('upload_photo/', views.upload_photo, name='upload_photo'),","type":"blockquote","key":"a0aj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"]","type":"blockquote","key":"73s0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы создали маршрут для представления upload_photo, который мы отределили на предыдущем шаге. Маршрут имеет путь 'upload_photo/', что означает, что наша форма будет доступна по адресу \"http:///upload_photo/\".","type":"unstyled","key":"dfjb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Шаг 6. Создание шаблона для формы","type":"unstyled","key":"1godt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим шаблон для нашей формы. Для этого необходимо создать файл upload_photo.html в папке templates в приложении photos.","type":"unstyled","key":"auuq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"`tt_blog/templates/upload_photo.html`","type":"unstyled","key":"2ns35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{% extends 'base.html' %}","type":"blockquote","key":"4n8pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4dlud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{% block content %}","type":"blockquote","key":"cim9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Загрузить фото

","type":"blockquote","key":"c690a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6m6ij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{% endblock %}","type":"blockquote","key":"92sj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном коде мы создали шаблон upload_photo.html, который наследует базовый шаблон base.html. Внутри блока {% block content %} мы создали форму, которая отправляет данные методом POST и использует тип данных multipart/form-data. В форме мы используем {% csrf_token %} для защиты от CSRF-атак. Кроме того, мы используем {{ form.as_p }} для отображения формы в виде списка параграфов. В конце формы мы добавляем кнопку для загрузки изображения.","type":"unstyled","key":"c3e3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Шаг 7. Обновление настроек проекта","type":"unstyled","key":"ckki1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того, чтобы наша форма работала корректно, необходимо обновить настройки проекта. Для этого необходимо добавить в файл проекта следующие строки.","type":"unstyled","key":"6tcqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"`tech_talk/settings.py`","type":"unstyled","key":"8p0co"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import os","type":"blockquote","key":"764an"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fhpvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"MEDIA_URL = '/media/'","type":"blockquote","key":"btto6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')","type":"blockquote","key":"cqimi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы определили константы MEDIA_URL и MEDIA_ROOT, которые позволяют Django определять место хранения загруженных изображений.","type":"unstyled","key":"8sd5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Шаг 8: Обновление URL-адреса проекта","type":"unstyled","key":"af6ll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, необходимо обновить URL-адрес проекта. Для этого необходимо открыть файл urls.py в корневой папке проекта и добавить следующие строки:","type":"unstyled","key":"gv4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"`tech_talk/urls.py`","type":"unstyled","key":"6uu49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.conf.urls.static import static","type":"blockquote","key":"4cmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.conf import settings","type":"blockquote","key":"7tlee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ebtgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"urlpatterns = [","type":"blockquote","key":"5oala"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"# ... другие маршруты ...","type":"blockquote","key":"4fvu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)","type":"blockquote","key":"be91l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы добавляем маршрут для медиа-файлов, которые будут загружаться пользователем. Мы импортируем функции static и settings из модуля django.conf.urls, после чего добавляем функцию static() в список urlpatterns. Эта функция добавляет URL-шаблон для маршрута к медиа-файлам, указывая URL-префикс MEDIA_URL и корневую директорию MEDIA_ROOT. Это позволяет Django обслуживать медиа-файлы в процессе разработки.","type":"unstyled","key":"ce9gg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После этого наша форма для загрузки фотографий готова к использованию. Вы можете использовать ее в своих представлениях Django и добавить ее на свои веб-страницы.","type":"unstyled","key":"e9k0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данном этапе, по адресу `http://localhost:8088/upload_photo/`, у нас должна получиться такая форма.","type":"unstyled","key":"3d1ta"},{"data":{"image":{"id":"64203d388bfece0d425b239b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"created by tech talk","type":"atomic:image","key":"34eg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, мы проделали большую работу и создали форму загрузки фотографий в Django. Но как же теперь обрабатывать загруженные изображения и отображать их на странице? Для этого нужно проделать еще несколько шагов.","type":"unstyled","key":"86seo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Шаг 9: Обработка загруженных изображений","type":"unstyled","key":"22s4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для обработки загруженных изображений нам понадобится вспомогательная библиотека Pillow. Если вы еще не установили эту библиотеку, установите ее, выполнив команду:","type":"unstyled","key":"c8bb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pip install pillow","type":"blockquote","key":"as7ki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нам необходимо обновить представление upload_photo в файле views.py в приложении photos, чтобы обрабатывать загруженные изображения. Вот код, который вы можете использовать:","type":"unstyled","key":"47vds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"`tt_blog/views.py`","type":"unstyled","key":"16t0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.shortcuts import render, get_object_or_404","type":"blockquote","key":"dsnmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.http import HttpResponseRedirect","type":"blockquote","key":"80d9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.urls import reverse","type":"blockquote","key":"88man"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from .forms import PhotoForm","type":"blockquote","key":"35f8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from .models import Photo","type":"blockquote","key":"fft92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7jr6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"def upload_photo(request):","type":"blockquote","key":"abs32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if request.method == 'POST':","type":"blockquote","key":"90e9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"form = PhotoForm(request.POST, request.FILES)","type":"blockquote","key":"5dlro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if form.is_valid():","type":"blockquote","key":"93oj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"photo = form.save()","type":"blockquote","key":"7ohfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return HttpResponseRedirect(reverse('photo_detail', args=[photo.id]))","type":"blockquote","key":"68d6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"else:","type":"blockquote","key":"76vgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"form = PhotoForm()","type":"blockquote","key":"ds80j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return render(request, 'tt_blog/upload_photo.html', {'form': form})","type":"blockquote","key":"4ii8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"def photo_detail(request, pk):","type":"blockquote","key":"ehde2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"photo = get_object_or_404(Photo, pk=pk)","type":"blockquote","key":"850ek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return render(request, 'tt_blog/photo_detail.html', {'photo': photo})","type":"blockquote","key":"cled5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы используем модуль HttpResponseRedirect для перенаправления пользователя на страницу photo_detail, которая будет отображать загруженное изображение. Если форма не прошла валидацию, мы просто отображаем форму заново.","type":"unstyled","key":"1vh74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В функции photo_detail мы используем функцию get_object_or_404, чтобы получить объект фотографии с заданным идентификатором (переданным в переменной pk). Если объект не найден, возвращается страница ошибки 404.","type":"unstyled","key":"6d96l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем мы вызываем функцию render(), чтобы отобразить шаблон photo_detail.html и передать объект фотографии в качестве контекста. Этот объект будет доступен в шаблоне под именем photo.","type":"unstyled","key":"7g7i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что мы также добавили импорт модели Photo в начало файла. Это необходимо для того, чтобы мы могли использовать модель Photo в функции photo_detail().","type":"unstyled","key":"69fb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Шаг 10: Отображение загруженных изображений","type":"unstyled","key":"dr8mr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим представление photo_detail, которое будет отображать загруженное изображение. Для этого создадим файл photo_detail.html в папке templates в приложении photos.","type":"unstyled","key":"c6f68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"`tt_blog/templates/photo_detail.html`","type":"unstyled","key":"adh4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{% extends 'base.html' %}","type":"blockquote","key":"1b0e6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6iiep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{% block content %}","type":"blockquote","key":"5c9an"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Посмотреть фото

","type":"blockquote","key":"d7kgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7cjtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"{{$ ","type":"blockquote","key":"8gemg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{% endblock %}","type":"blockquote","key":"fgbng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы используем {{ photo.image.url }} для отображения URL-адреса загруженного изображения.","type":"unstyled","key":"4qegm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Шаг 11: Добавление маршрута для photo_detail","type":"unstyled","key":"5vpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, добавим маршрут для представления photo_detail в файл urls.py в приложении photos.","type":"unstyled","key":"fikur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"`tt_blog/urls.py`","type":"unstyled","key":"eg0uu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from django.urls import path","type":"blockquote","key":"3kaci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from . import views","type":"blockquote","key":"2ark5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dkd9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"urlpatterns = [","type":"blockquote","key":"9gnlj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"path('upload_photo/', views.upload_photo, name='upload_photo'),","type":"blockquote","key":"brf32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"path('photo//', views.photo_detail, name='photo_detail'),","type":"blockquote","key":"6gm2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"]","type":"blockquote","key":"8bksm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы создали маршрут для представления photo_detail, который принимает целочисленный параметр pk, который является идентификатором фотографии.","type":"unstyled","key":"d4132"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готово! Теперь вы можете загружать фотографии через форму и отображать их на странице photo_detail.","type":"unstyled","key":"cldef"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":30,"offset":11}],"inlineStyleRanges":[],"text":"По адресу `http://localhost:8088/photo/1/` мы должны увидеть наше фото.","type":"unstyled","key":"caeqr"},{"data":{"image":{"id":"64203d65e78d515b1820ef35"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"created by tech talk","type":"atomic:image","key":"498k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nЕсли у вас есть что-либо добавить к статье, пишите это в комментарии.\n\nСтавьте лайк и подписывайтесь. Давайте позновать новое вместе \uD83D\uDE4C","type":"unstyled","key":"4td6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"0j1Nj8xORah3DJVFOY0X"}],"entityMap":{"0":{"data":{"href":"https://github.com/axkxd/tech_talk","url":"https://github.com/axkxd/tech_talk"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://dzen.ru/a/ZBb9s-ljbQP4ajCJ?share_to=link","badSeoLink":"true","url":"https://dzen.ru/a/ZBb9s-ljbQP4ajCJ?share_to=link"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"http://localhost:8088/photo/1/","url":"http://localhost:8088/photo/1/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}