如何使用 axios 將表單 vue js 中的數據與 Django 綁定？

Question

我想開發一個接口，從我在 django 的后端上傳帶有 Vue js 的文件，我無法弄清楚問題所在。 但這是我得到的錯誤：“POST http://127.0.0.1:8000/upload/ 500（內部服務器錯誤）”

這里 class 在 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>