Vue2对接Strapi3提交表单时文本入库图片上传失败报400如何解决

修正后的功能代码如下：

async enregistreAjout(e) {
  // 阻止表单默认提交刷新行为
  e.preventDefault()
  try {
    // 先提交文本数据创建条目
    const createRes = await axios.post(`${constantes.serveurapi}/${constantes.collectionAnnonces}`, {
      title: this.titre,
      category: this.categorie,
      content: this.commentaire
    }, {  
      headers : {
        'Authorization': 'Bearer ' + this.token
      }                     
    })
    const entryId = createRes.data.id
    // 封装图片上传参数
    const formData = new FormData()
    formData.append("files", this.file)
    formData.append("ref", "annonce")
    formData.append("refId", entryId)
    // 此处field值要和Strapi annonce模型里的图片字段名完全一致
    formData.append("field", "picture")
    // 上传图片关联条目
    await axios.post(`${constantes.serveurapi}/upload`, formData, {
      headers : {
        'Authorization': 'Bearer ' + this.token
      }                    
    })
    // 可自行添加上传成功后的业务逻辑，比如重置表单、刷新列表
  } catch(error) {
    console.log(error)
  }
}

错误原因说明 #

• 表单默认提交行为未阻止：你使用了原生type="submit"的按钮，点击后会触发浏览器默认表单提交行为刷新页面，导致后续上传逻辑中断，需要添加阻止默认事件的逻辑。
• FormData传参格式错误：调用上传接口时你把FormData对象套在了{body: formData}的对象里，Strapi无法正常识别上传的文件，直接把FormData对象作为axios.post的第二个参数传入即可。
• 请求头配置错误：上传FormData时手动设置了content-type: application/json，导致Strapi无法正确解析文件流，删除该配置即可，axios会自动识别FormData对象，自动生成带正确边界标识的multipart/form-data请求头。
• 条目ID取值错误：创建条目后返回的响应数据里，ID存放在response.data.id下，不是response.id，取值错误会导致图片无法关联到对应条目。

额外校验点 #

• 确认Strapi后台的annonce内容类型中，图片字段的名称确实为picture，和formData中field参数的取值完全匹配。
• 确认上传的图片大小、格式符合Strapi后台的上传规则限制。

内容的提问来源于stack exchange，提问作者Yannou