Vuejs post data then link uploded file error 400

Questions and Answers
1
System Information
  • Strapi Version: 3.6
  • Operating System:
  • Database:
  • Node Version: 14
  • NPM Version:
  • Yarn Version:

Hello,

With Vuejs I’ve a form like this :

  <div class="form-group">

      <label for="title">Titre</label>

      <input v-model="titre" type="text" name="title" class="form-control" required />

  </div>      

  <div class="form-group">

      <label for="category">Catégorie</label>

      <select v-model="categorie" class="form-control" required>

      <option selected>----</option>

      <option value="job">maison</option>

      <option value="rent">appartement</option>

      </select>

  </div>

  <div class="form-group">

      <label for="content">Commentaire</label>

      <textarea v-model="commentaire" cols="30" rows="10" class="form-control" required></textarea>

  </div>    

  <div class="form-group">

      <label for="picture">Image</label>

      <!-- v-model ne fonctionne pas il faut utiliser v-on:change -->          

      <input type="file" id="file" name="picture" ref="file" class="form-control" v-on:change="handleFileUpload"/>

      <br><img src="../../assets/default.jpg" alt=""><br>

  </div>          

  <input type="hidden">

  <button type="submit" class="btn btn-xs btn-primary" v-on:click.prevent="enregistreAjout">Enregistrer</button>

  <!--<div class="btn btn-xs btn-primary" v-on:click="enregistreAjout">Enregistrer</div>-->

  <div class="btn btn-xs" v-on:click="toggleAfficheAjouter">Annuler</div>

</form>

Then a method

async enregistreAjout() {

        try {

            await axios.post(`${constantes.serveurapi}/${constantes.collectionAnnonces}`, {

                title: this.titre,

                category: this.categorie,

                content: this.commentaire

              }, {  

                headers : {

                  'content-type': 'application/json',

                  'Authorization': 'Bearer ' + this.token

                }                    

              })

              .then((response) => {

                console.log("response",response)

                console.log("files",this.file)  

                let formData = new FormData()

                formData.append("files",this.file)  

                formData.append("ref","annonce")

                formData.append("refId",response.data.id)// quel est l'id

                formData.append("field","picture")//quel est le champ

                console.log("formData",formData)                

                return axios.post(`${constantes.serveurapi}/upload`, {

                  body: formData,

                  },{

                    headers : {

                      'Authorization': 'Bearer ' + this.token

                    }                    

                  })  

                })

          } catch(error) {

              console.error(error)

          }

      }

And for the file I’ve this method :

      handleFileUpload: function(){ // recuperation de l'image
        this.file = this.$refs.file.files[0]

I get an error 400 bad request but I can see where I’m wrong, it’s been 10 hours I’m stick here, I’ve been reading hundred of website without the answer.

Please someone could help me ?

2

So after many hours of searching , it’s very important to import formdata

import FormData from 'form-data'

Then it work

      async enregistreAjout() {
        try {
            await axios.post(`${constantes.serveurapi}/${constantes.collectionAnnonces}`, {
                title: this.titre,
                category: this.categorie,
                content: this.commentaire
              }, {  
                headers : {
                  'content-type': 'application/json',
                  'Authorization': 'Bearer ' + this.token
                }                     
              })
              .then((response) => { 
                let formData = new FormData() // /!\ on doit importer Formdata sinon erreur 400 bad request
                formData.append("files",this.file)  // quel est le fichier
                formData.append("ref","annonce") // quel est la collection (sans le s à la fin)
                formData.append("refId",response.data.id)// quel est l'id
                formData.append("field","picture")//quel est le champ          
                return axios.post(`${constantes.serveurapi}/upload`, 
                  formData
                  ,{
                    headers : {
                      'Authorization': 'Bearer ' + this.token
                    }                    
                  })  
                }) 
          } catch(error) {
              console.error(error)
          }
      }