使用formdata.append()上传文件时提示The laptop image field is required的问题

可能原因1：表单中已存在同名空字段，append导致重复提交 #

你通过new FormData(form)初始化时，表单里的laptop_image输入框（即使未选择文件）已经被加入到FormData中，此时该字段值为空。后续调用append('laptop_image', fileInput.files[0])会新增一个同名字段，导致FormData中存在两个laptop_image条目，后端通常只会读取第一个空值，因此触发必填报错。

解决方法：
用set代替append，直接覆盖原有的空字段：

formData.set('laptop_image', fileInput.files[0]);

或者先删除原有空字段再追加：

const formData = new FormData(form);
formData.delete('laptop_image');
formData.append('laptop_image', fileInput.files[0]);

可能原因2：postFormDataAsJson函数错误序列化FormData #

如果postFormDataAsJson内部将FormData转为JSON格式（比如使用JSON.stringify(formData)），File对象无法被JSON序列化，后端自然收不到文件数据。FormData必须直接作为请求体发送，不能转成JSON。

修正函数实现：
确保函数直接传递FormData作为请求body，不要手动设置Content-Type（浏览器会自动添加正确的multipart/form-data及boundary）：

async function postFormDataAsJson({ url, formData }) {
  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  if (!response.ok) {
    throw new Error(`请求失败：${response.statusText}`);
  }

  return response.json();
}

额外排查点 #

• 再次核对后端接收的字段名是否严格匹配（比如是否区分大小写）；
• 确保文件输入框未被禁用，且表单添加enctype="multipart/form-data"属性（用FormData提交时浏览器会自动处理，但手动添加更稳妥）：

<form enctype="multipart/form-data">
  <!-- 表单内容 -->
</form>

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