Загрузка и добавление файлов в vuejs и django

как я могу добавить файл в мой front end vuejs и загрузить мой файл из моего backend django rest framework с v-model в vuejs мой modele это статья ,

class Article(models.Model):
   conference = models.ForeignKey(Conference,related_name='articles',on_delete=models.CASCADE)
   title =models.CharField(max_length=50)
   Auteur =models.CharField(max_length=50)
   resume =models.TextField()
   motcles =models.TextField()
   create_by = models.ForeignKey(User, related_name='articles',on_delete=models.CASCADE)
   fichier = models.FileField(upload_to='uploads',blank=True, null=True)
   
   def __str__(self):
           return self.title

Этот код о том, как я добавляю новую статью, я должен здесь добавить, как ввести файл

<form v-on:submit.prevent="submitArticle()">
               <div class="field">
                   <label class="label">Title</label>
                   <div class="control">
                       <input type="text" class="input" v-model="article.title">
                   </div>
               </div>
               <div class="field">
                       <label>Auteur</label>

                       <div class="control">
                           <input type="title" class="input" v-model="article.Auteur">
                       </div>
               </div>
               <div class="field">
                   <label class="label">Resume</label>
                   <div class="control">
                       <textarea type="text" class="input" v-model="article.resume"></textarea>
                   </div>
               </div>
               <div class="field">
                       <label>motcles</label>
                       <div class="control">
                           <input type="title" class="input" v-model="article.motcles">
                       </div>
               </div>
               <div id="app">
   <a
     href="#"
     @click.prevent="
       downloadItem({
         url:
           'https://test.cors.workers.dev/?https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
         label: 'example.pdf',
       })
     "
   >
     download
   </a>
 </div>
               <div class="field">
                   <div class="control">
                       <button class="button is-link">submit</button>
                   </div>
               </div>
               
           </form>

так я ввожу свою статью

submitArticle() {
               console.log('submitArticle')
               const conferenceID = this.$route.params.id
               this.errors = []

               if (this.article.title === '') {
                   this.errors.push('The title must be filled out')
               }

               if (this.article.resume === '') {
                   this.errors.push('The content must be filled out')
               }

               if (!this.errors.length) {

                   axios
                       .post(`/api/v1/add-article/${conferenceID}/`, this.article)
                       .then(response => {
                           this.article.title = ''
                           this.article.Auteur = ''
                           this.article.resume = ''
                           this.article.motcles = ''
                           this.articles.push(response.data)
                       })
                       .catch(error => {
                           console.log(error)
                       })

пожалуйста, мне нужна помощь, как добавить и скачать файл?

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