Vue.js中使用FormData.append传递布尔值时数据库始终收false的问题

1. 核心拼写错误 #

后端API代码存在字段名拼写错误：前端传递的字段是availability，但后端写成了avaliability（正确拼写应为availability）。这会导致req.body.avaliability始终为undefined，数据库字段因默认值为false，最终存入的结果始终是false。

修复后的API代码：

product.availability = req.body.availability

2. 表单输入类型缺失 #

模板中的<input>未指定type="checkbox"，默认类型为text，无法通过v-model正确绑定布尔值实现复选框的切换逻辑。即便控制台打印this.availability为true，也可能是异常逻辑导致，必须明确指定输入类型。

修复后的模板代码：

<input
  type="checkbox"
  v-model="availability"
/>

3. FormData传递布尔值的类型转换问题 #

使用FormData.append()时，布尔值会被自动转为字符串（"true"或"false"）。若后端直接将该字符串赋值给布尔类型的数据库字段，部分数据库或ORM不会自动完成类型转换，导致最终存入false（字符串"true"与布尔true不相等）。

两种解决方式： #

方式一：前端转数值后传递

async handleSubmit() {
  const formData = new FormData();
  // 将布尔值转为1/0，后端接收后再转回布尔
  formData.append("availability", this.availability ? 1 : 0);
}

后端对应处理：

product.availability = req.body.availability === 1;

方式二：改用JSON格式发送（推荐）

若无需上传文件，直接用JSON格式发送数据，避免类型转换问题：

async handleSubmit() {
  await fetch('/你的API地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      availability: this.availability
    })
  });
}

这种方式后端可直接接收布尔值，无需额外转换。

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