Блог

Я использовал код загрузки файлов с помощью VueJS и Axios. Я использую внутренний код, загруженные изображения Django сохраняются в базе данных. В разделе после отправки и перед отправкой я могу видеть изображения, загруженные в консоль. Но после отправки я не могу получить доступ к данным формы в бэкэнд django. Ниже приведен фрагмент кода кода шаблона

 lt;script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/axios/dist/axios.min.js"gt;lt;/scriptgt;  lt;div id="app"gt;  lt;h2gt;Multiple Fileslt;/h2gt;  lt;hr/gt;  lt;form method="post" enctype="multipart/form-data"gt;  {% csrf_token %}  lt;labelgt;  lt;spangt;Fileslt;/spangt;  lt;input type="file" multiple name="file" @change="handleFileUploads($event)" /gt;  lt;ul v-if="files.length"gt;  lt;li v-for="(name, i) in filesNames" :key="i"gt;{{ name }}lt;/ligt;  lt;/ulgt;  lt;/labelgt;  lt;divgt;  lt;img v-for="image in images" :src="image" /gt;  lt;/divgt;  lt;br /gt;  lt;button @click="submitFile()"gt;Submitlt;/buttongt;  lt;/formgt; lt;/divgt;   lt;scriptgt; new Vue({  el: '#app',  data() {  return {  files: [],  images: [],  }  },  computed: {  filesNames() {  const fn = []  for (let i = 0; i lt; this.files.length;   i) {  fn.push(this.files.item(i).name)  console.log('fn');  console.log(fn);  }  return fn  }  },  methods: {  handleFileUploads(event) {  this.files = event.target.files;  this.images = [...this.files].map(URL.createObjectURL);  console.log('images');  console.log(this.images);  let formData = new FormData();  for (var i = 0; i lt; this.files.length; i  ) {  let file = this.files[i];  formData.append('files['   i   ']', file);   }  console.log('formData');  console.log(formData);  console.log('values');  console.log(formData.values());  for (var value of formData.values()) {  console.log('value');  console.log(value);  }  },   submitFile() {  console.log("submit");  let formData = new FormData();  let fna = []  for (var i = 0; i lt; this.files.length; i  ) {  let file = this.files[i];  formData.append('files['   i   ']', file);  fna.push(file);  console.log('formData');  console.log(formData);  console.log('files['   i   ']', file);   }  console.log('formData');  console.log(formData);  console.log(formData.values());  for (var value of formData.values()) {  console.log(value);  }  axios.post('/service-ad-testing', formData, {  headers: {  'X-CSRFTOKEN': '{{ csrf_token }}',  'Content-Type': 'multipart/form-data'  }  }).then(function() {  console.log('SUCCESS!!');  console.log('files');  console.log(this.files);  console.log('images');  console.log(this.images);  })  .catch(function() {  console.log('FAILURE!!');  });  }  } }) lt;/scriptgt;   

Джанго views.py

 def servicevue_test(request):  if request.method == "POST":  data = request.POST.getlist('file')  data1 = request.POST.get('file')  print('data')  print(data)  print(data1)   savehotel = Hotel(  image=data,  image2=data,  )  savehotel.save()  messages.success(request, """Your Ad is successfully posted.""")  return JsonResponse(data, safe=False)  return render(request, 'testlightbox.html')  

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