400 (Bad Request) error when making a POST request to Strapi CMS API in Nuxt 2

Question

Problem:

I'm encountering an issue while attempting to make a POST request to the Strapi CMS API from my Nuxt 2 application. Despite providing the necessary data, I receive a 400 (Bad Request) error message. Additionally, the request fails to create an entry on the 'propuesta' table.

Code:

Here's the code snippet that generates the problem:

async sendFormInfo() {
  await axios.post('http://localhost:1337/api/propuestas/', {
    'data': {
      'fecha': this.date,
      'email': this.email,
      'nombre': this.name,
      'descripción': this.description,
      'link': this.links,
    }
  }).then(response => {
    console.log(response.data);
  });
}

Details:

To provide a more accurate solution, I'd like to share some important details regarding the setup:

• The application is built using Nuxt 2.
• Buefy is utilized for CSS styling.
• The API I'm trying to make a request to is running on Strapi CMS.
• The problem isn't related to the API URL since I can successfully make GET requests.
• As this code is for testing purposes, I've granted full access to the API for the Public role, so permissions shouldn't be the problem.

Any insights, suggestions, or troubleshooting steps would be greatly appreciated.

Thank you in advance for your help!

Edit:

As @antokhio suggested, the problem was the encoding of the "Fecha" attribute, which is a Date and I was trying to pass a String.

However, when I try to upload a file to my backend (I created a test table to try to upload different types of data), I only get an empty row in my table.

New code:

This is the updated function in my index.vue:

async sendFormInfo() {
  try {
        
    let formData = new FormData()
    formData.append('Archivos', this.files)

    await axios.post('http://localhost:1337/api/pruebas',
    { data: formData }
    ).then(response => {
     console.log(response.data);
    });
  } catch (error) {
    console.log(error)
  }
}

This is the schema.json of my test table "Prueba":

{
  "kind": "collectionType",
  "collectionName": "pruebas",
  "info": {
    "singularName": "prueba",
    "pluralName": "pruebas",
    "displayName": "Prueba",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {},
  "attributes": {
    "Archivos": {
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ],
      "type": "media",
      "multiple": true
    }
  }
}

New details:

The variable this.files is an array of files with the following structure:

this.file: [
    [lastModifiedValue, lastModifiedDateValue, nameValue, sizeValue, typeValue, webkitRelativePathValue],
    [lastModifiedValue, lastModifiedDateValue, nameValue, sizeValue, typeValue, webkitRelativePathValue],
    //...
]

All of these values are generated by my buefy file input

<b-upload v-model="files" multiple drag-drop expanded>
      <!-- A section with a div, a paragraph and an icon -->            
</b-upload>