Uploading Files With VueJS and Axios + Django

Hi,
I have used code of Uploading Files With VueJS and Axios. I am using backend code Django uploaded images save into database. In after submit and before submit i am able to see images uploaded in console. But After submit i am not able to access formData into django backend. Below is snippet code
Template code

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <h2>Multiple Files</h2>
  <hr/>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <label>
      <span>Files</span>
      <input type="file" multiple name="file" @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 @click="submitFile()">Submit</button>
  </form>
</div>


<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)
	  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 < 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 < 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!!');
        });
    }
  }
})
</script>

Django 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')

From above code I am getting response empty list. How Can I achieve to save data into database. Please any one can help me to achieve this Thank you.