Failed to access formData in Django. Uploading Files With VueJS and Axios + Django

Question

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

<script src="https://cdn.jsdelivr.net/npm/vue@2/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>

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.