@life-f

Как извлечь изображение из ajax на сервере django и сохранить?

Здравствуйте

При разработке проекта столкнулась с проблемой сохранения изображений профиля.
Фронтенд часть пишется на Vue.js с плагином Vuetify. Картинка добавляется в v-input-file (по сути input[type=file]). Затем через ajax запрос изображение передается на серверную часть на django.
Как извлечь объект из запроса и сохранить его при помощи django в необходимую папку на сервере?

Vue.js html
<v-file-input v-model="photoField" placeholder="Фото профиля" accept="image/*"
                          prepend-icon="" outlined></v-file-input>


AJAX
let fd = new FormData();
      let avatar = this.photoField;
      if (avatar !== undefined) {
        fd.append('image', avatar)
      } else {
        console.log("ERROR")
        return
      }

      $.ajax({
        url: this.$hostname + "profiles/" + this.currentProfile.id,
        type: "PUT",
        processData: false,
        data: fd,
        success: () => {
          console.log("Профиль изменен")
          this.loadData()
          this.photoDialog = false
        },
        error: (response) => {
          this.alertError = true
          this.alertMsg = "Непредвиденная ошибка"
          console.log(response.data)
        },
      })


При просмотре полученных данных на сервере получаю:
{"data":{"data":""------WebKitFormBoundaryghDtcs0s8LQanodr\r\nContent-Disposition: form-data; name":"\"image\"; filename=\"user1.png\"\r\nContent-Type: image/png\r\n\r\nPNG\r\n\u001a\n\u0000\u0000\u0000\r...","id":7}}
  • Вопрос задан
  • 257 просмотров
Решения вопроса 1
@life-f Автор вопроса
Ответом стало применение библиотеки axios вместо jQuery.ajax. Через форм дата данные были переданы на сервер, где сохранены в нужном формате

const axios = require('axios')
      // чтение файла в formData
      let fd = new FormData();
      let avatar = this.photoField;
      if (avatar !== undefined) {
        fd.append('image', avatar)
      } else {
        console.log("ERROR")
        return
      }
      axios({
        method: 'put',
        url: this.$hostname + "time-tracking/profiles/" + this.currentProfile.id,
        headers: {"Authorization": "Token " + (sessionStorage.getItem("auth_token") || localStorage.getItem("auth_token"))},
        data: fd
      })
          .then(response => {
            console.log(response.data.data)
            this.loadData()
          });
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@forkhammer
Fullstack-разработчик (Django, Angular)
Получить файл можно так
image_tmp_file = request.FILES['image']

image_tmp_file - это объект типа TemporaryUploadedFile, по сути временный файл. Его можно непосредственно сохранить в ImageField или произвести другие действия.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы