Nuxt3中如何扩展现有表单实现图片上传至后端？

你的核心问题是手动设置了multipart/form-data请求头，导致浏览器无法自动添加必要的boundary分隔符，后端因此无法解析请求数据。下面是修正方案：

正确的实现步骤 #

1. 移除手动设置的Content-Type头 #

当使用FormData作为请求体时，浏览器会自动生成包含boundary的正确Content-Type头，无需手动指定。

2. 修正后的submit函数代码 #

替换你原有的submit函数：

const submit = async () => {
  errorsMessage.value = ''
  succesMessage.value = ''

  // 校验文件是否选择
  if (!imageFile.value) {
    errorsMessage.value = '请选择一张图片'
    return
  }

  try {
    const formData = new FormData()
    formData.append('file', imageFile.value)
    formData.append('name', recipe.value.name)
    formData.append('description', recipe.value.description)

    const response = await fetch('http://127.0.0.1:8000/api/recipe', {
      method: 'POST',
      body: formData,
      headers: {
        // 只保留Accept，去掉Content-Type
        'Accept': 'application/json',
      }
    })

    const data = await response.json()

    if (!response.ok) {
      let errorStr = ''
      for (const key in data.errors) {
        data.errors[key].forEach(errorMsg => {
          errorStr += errorMsg + '<br>'
        })
      }
      errorsMessage.value = errorStr
    } else {
      succesMessage.value = data.message
      // 提交成功后重置表单
      recipe.value = { name: '', description: '' }
      imageFile.value = null
      document.getElementById('image').value = ''
    }

  } catch(error) {
    errorsMessage.value = '请求失败，请检查后端服务是否运行'
  }
}

额外注意事项 #

• 文件校验：添加了图片选择校验，避免用户未选文件就提交
• 表单重置：提交成功后重置表单和文件输入框，提升用户体验
• 后端配置：确保后端框架已正确配置接收multipart/form-data类型的请求，并且能正确解析file、name、description字段

为什么之前的方法失败？ #

1. 第一种方法：在原有JSON请求里混加FormData，逻辑错误，JSON和FormData是两种不同的请求体格式，不能混用
2. 第二种方法：手动设置Content-Type: multipart/form-data，缺少浏览器自动生成的boundary参数，后端无法识别数据分隔，导致解析失败

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