Как связать данные из формы vue js с Django с помощью post axios?

Я хочу разработать интерфейс, который загружает файл с помощью Vue js из моего бэкенда на django, я не могу понять проблему. но вот ошибка, которую я получил: "POST http://127.0.0.1:8000/upload/ 500 (Internal Server Error)"

здесь класс "upload" в view.py:

def upload(request):
    obj = None
    dict={}
    if request.method == 'POST':
        repo = Repository(username="fedoraAdmin",password="fedora2022")
        obj = repo.get_object(type=FileObject)
        obj.file.content = request.FILES['file']
        obj.file.mimetype=request.FILES['file'].content_type
        obj.file.label=request.FILES['file'].name
        obj.label = request.POST['label'] 
        obj.save()
        dict=obj.index_data()      
        print(dict)
    return JsonResponse(dict) 

моя форма в forms.py:

class UploadForm(forms.Form):
    label = forms.CharField(max_length=255, # fedora label maxes out at 255 characters
                help_text='Preliminary title for the new object. 255 characters max.')
    file = forms.FileField()

Наконец, мой код vue js:

<template> 
            <div class="container">     <h1 class="title mb-6">Uploader</h1>      <div>
                  <form @submit.prevent="submitFile" enctype="multipart/form-data">
                       <input type="file" @change="uploadFile" ref="file">
                        <button>Upload!</button>
                 </form>
            </div>
               </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'archivage',              
    mounted() {
        document.title = 'Archivage | fedora'
    } ,
    methods: {         
    uploadFile() {
        this.file = this.$refs.file.files[0];
        this.label=this.$refs.file.files[0].name
      },  
       performUpload() {
          const formData = {
                    label: this.label,
                    file: this.file}
            axios
                .post('/upload/',formData)
                .then(response => {
                       console.log(response.data) ;
                    }) .catch(error => {
                    console.log(error)
                })
         },  
           submitFile: function(){ 
                  this.performUpload()    },          
              }
}
 
</script>

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