Создание web-сервиса. Всё, но не сразу. Загрузка файлов на сервер

Сегодня мы разберём загрузку файлов на примере компаний.

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

Django

Для начала идём в файл views.py в Django и добавим класс CompanyCreateAPIView. Он ни чем не отличается от примера, описанного в разделе регистрация. Код полностью на pastebin.
Запускаем Django.
В url не забываем добавить ссылку на наше новое представление.

python3 manage.py runserver

Чтобы проверить всё ли сделано правильно, перейдите по ссылке (в моём случае) http://127.0.0.1/add_company
и увидите.

Прошу обратить внимание на форму. Можете создать тестовую компанию.

Nuxt

Далее будем работать с nuxt.
Создаём в page папку company и в нём создаём файл add.vue

В нём будет форма для добавления и запроса к API.
Html форма полностью на pastebin.

В секции script у нас будет метод data, где перечисляем поля из формы, которые нам понадобятся.

в axios составим post запрос к api - 127.0.0.1:8000/add_company ,а в методе onSubmit разберём его.

Создадим объект FormData, для кодирования данных, которые необходимо отправить на сервер посредством технологии AJAX и запишем в константу data.

const data = new FormData(document.getElementById('uploadForm'))

Далее ищем первый элемент HTML-документа, который соответствует селектору #exampleInput3. Получим input из нашей формы.

 var imagefile = document.querySelector('#exampleInput3')

Получаем первый элемент в нашем input file. Он будет единственным.

imagefile.files[0]

Далее добавим к нашему объекту data данные, которые отправим на сервер.
Такой код означает, что параметр name будет иметь значение из нашей формы.

data.append('name', this.form.name)

в axios укажем, url нашего api, данные, которые отправим и заголовки - Content-Type, чтобы указать, что отправляется файл, и то что мы авторизованы.

axios.post('http://127.0.0.1:8000/add_company',
          data,
          {
            headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': 'JWT ' + localStorage.getItem('token')
            }
          })

Листинг нового представления в Django
Листинг нового представления в Nuxt

Данный пост подготовлен автором @zheev. В рамках данного цикла статей он расскажет о том, что и как он программировал, какие языки и технологии использовал. С какими трудностями пришлось столкнуться и их решение на реальных примерах.

Первая часть - Вступление
Вторая часть - Проектирование БД
Третья часть - Установка окружения
Четвёртая часть - Установка и настройка Django
Пятая часть - Установка и сборка Vue
Шестая часть - Создание таблиц средствами Django
Седьмая часть - Создание REST приложений на Django
Восьмая часть - Использование фреймворка Nuxt в приложении на Vue
Девятая часть - Делаем авторизацию в Django
Десятая часть - Авторизация в клиентской части
Одиннадцатая часть - Создание регистрации