Проблема с загрузкой изображений. При загрузке изображения принимается только имя изображения, но не сами изображения, как решить эту проблему?

Используя Vuejs, Axios и Django, мы загружаем "несколько изображений" с помощью формы Vuejs за одну попытку загрузки/просмотра. После загрузки изображения попадают в список, а затем список имен изображений сохраняется в бэкенде в поле ImageField. Имена изображений сохраняются в базе данных, но не сохраняются в папке Media Folder. Вот фрагмент кода

Vuejs

  <label>
    <span>Files</span>
    <input type="file" multiple @change="handleFileUploads($event)" />
    <ul v-if="files.length">
      <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
    </ul>
  </label>
  <div>
    <img v-for="image in images" :src="image" />
  </div>
  <br />
  <button v-on:click.prevent="submitForm">Submit</button>

Аксиокс

<script>
new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      images: [],
    }
  },
  computed: {
    filesNames() {
      const fn = []
      for (let i = 0; i < this.files.length; ++i) {
        fn.push(this.files.item(i).name)

      }
      return fn
    }
  },
  methods: {
    handleFileUploads(event) {
      this.files = event.target.files;
      this.images = [...this.files].map(URL.createObjectURL);
    },
    submitFile() {
      let formData = new FormData();
      for (var i = 0; i < this.files.length; i++) {
        let file = this.files[i];
        formData.append('files[' + i + ']', file);
      }
     submitForm: function(){
                  let formData = new FormData();
                  const fna = []
                  for (let i = 0; i < this.files.length; ++i) {
                    fna.push(this.files.item(i).name)
                  }
                  console.log('fna');
                  console.log(fna);
            axios({
                method : "POST",
                url: "{% url 'service-ad' %}",
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}',
                'Content-Type': 'multipart/form-data'},
                data : {
                "images": fna,
                },
              }).then(response => {
                    console.log('SUCCESS!!');
              }).catch(err => {
                    console.log('FAILURE!!');
              }); 
    }
  }
})
</script>

В другом случае мы имеем аналогичную функциональность загрузки "нескольких изображений" за одну попытку загрузки/просмотра, но здесь мы используем HTML форму и имена изображений сохраняются в базе данных, а также в папке Media Folder.

Django

def servicevue(request):
    if request.method == "POST":
        data = json.loads(request.body)
        images = data['images']
        img_length = len(images)
        if img_length == 1:
            image_name = images[0]
            image_name2 = ''
        elif img_length == 2:
            image_name = images[0]
            image_name2 = images[1]
        else:
            image_name = ''
            image_name2 = ''

        savehotel = Hotel(
                          image=image_name,
                          image2=image_name2,
                          )
        savehotel.save()
        messages.success(request, """Your Ad is successfully posted.""")
        return JsonResponse(safe=False)
    return render(request, 'servicead.html')

Так что мы задаемся вопросом, в чем может быть проблема. Мы надеемся, что наш код реализован правильно. Пожалуйста, помогите, есть ли способ разблокировать эту проблему?

Вернуться на верх