Когда я начал изучать Django с PostgreSQL в течение последнего года, я столкнулся со многими проблемами, одна из самых болезненных проблем — это загрузка изображений с использованием REST API Django с шаблоном внешнего интерфейса javascript.

Примечание. Чтобы получить краткое представление об этой концепции, пожалуйста, прочитайте эту статью полностью.

Первоначально, когда я загружал изображения с шаблоном внешнего интерфейса javascript и общался с внутренним API, используя кодирование и декодирование (концепцию) для изображений в формате base64 (поверьте мне, очень сложно обрабатывать несколько изображений), используя в качестве базы данных SQL.

Кроме того, я нашел несколько простых способов использовать данные формы для связи с серверным API и внешним интерфейсом для обработки изображений. но мне было очень сложно реализовать его в моем внешнем шаблоне (для меня), попробовал с почтальоном, он работает нормально. В конце концов, мне не удалось реализовать эти данные формы, и я продолжил использовать предыдущую концепцию (кодирование и декодирование изображений в формате base64).

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

После некоторых исследований я узнал, что мы должны загружать изображения, используя нереляционные базы данных, то есть NoSQL, такие как AWS (сегмент S3), GCP (облачная платформа), облачное хранилище Firebase и т. д.….

Затем я выбираю AWS (сегмент S3), потому что я увидел, что у них так много доступных ресурсов по сравнению с другими, такими как Azure и GCP. Затем я выбрал и начал с AWS.

После интеграции хранилища корзин AWS S3 с моим бэкэндом Django я выбрал AXIOS вместо XMLHTTP (как предлагали некоторые ресурсы в Интернете) для связи API-интерфейсов бэкенда с интерфейсом, после чего, наконец, я получил лучшее решение для загрузки изображений. Даже я не ожидал и не осознавал, что изменение XMLHTTP на Axios также влияет на загрузку изображений (к счастью, я получил это, перепробовав так много вещей).

Вот мой полный код:-

На внешнем интерфейсе я использовал vue.js (но не паникуйте, просто посмотрите содержимое в коде, а также один раз проверьте процесс кода, если вы знаете ванильный javascript, он в порядке, вы можете понять ..).

Простые шаги, описанные в приведенном выше коде, это: -

  1. Я взял изображения из ввода в шаблон, т.е. Html в ванильном javascript
  2. Используя «change(ключевое слово)», я передал это изображение event.target.files[0]впеременную.
  3. Как только я нажимаю кнопку отправки, сохраненное содержимое в «selectfile» добавляется в данные формы. и перейдите к Axios, и он позаботится.

Вывод (внешний интерфейс): — Просто получите файл event.target.files[0] из исходного изображения, добавьте его к FormData(), и передайте в Axios. После проверки ресурсов Axios это вам очень поможет.

— — — — — — — — — — — — — — — — — — — — — — — — —

Это внутренняя часть, использующая структуру Django: -

Viewset.py

Я использовал простой набор представлений модели, в нем нет простого мультипарсера. как выше.

В этом весь опыт. как загружать и обрабатывать изображения с помощью API Django rest framework с внешним javascript.

Таким образом, я столкнулся со многими проблемами в программировании на разных языках и решил их с помощью разных подходов. Буду делиться своими предстоящими постами на Medium до тех пор, пока StayTuned…………..