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

Question

[life-f]

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

При разработке проекта столкнулась с проблемой сохранения изображений профиля.
Фронтенд часть пишется на 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}}

Answer 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()
          });

Answer 2

[Евгений Акулинин]

Получить файл можно так
image_tmp_file = request.FILES['image']

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