Nuxt 2调用Strapi CMS API遇400错误及文件上传异常

问题详情 #

在Nuxt 2应用中向Strapi CMS的API发送POST请求时，已提供必要数据，但仍收到400（Bad Request）错误，无法在propuesta表中创建条目。

相关代码 #

触发问题的代码片段：

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);
  });
}

环境配置 #

• 应用基于Nuxt 2构建
• 使用Buefy进行CSS样式开发
• 请求目标为Strapi CMS运行的API
• API地址无误，GET请求可正常执行
• 测试阶段已为Public角色授予API全部权限，排除权限问题

背景说明 #

修正Fecha字段的类型问题（原字段为Date类型，此前传入了String类型）后，尝试向后端上传文件到测试表Prueba时，仅在表中生成空行。

更新后代码 #

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)
  }
}

测试表Prueba配置 #

schema.json内容：

{
  "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
    }
  }
}

补充详情 #

• this.files为文件数组，结构如下：

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

• 该变量由Buefy文件输入组件生成：

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

内容的提问来源于stack exchange，提问作者Simeón