VueJS POST请求中file字段未发送的问题求助

先排查核心问题：数据是否真的存在 #

在submitForm函数里先打印完整的requirements数据，确认file字段确实存在且值正确：

async function submitForm() {
  const requirements = getFormRequirements();
  // 打印完整结构，看file字段是否存在
  console.log('requirements:', requirements);
  console.log('requirements JSON:', JSON.stringify(requirements));
  
  // 后续代码...
}

如果这里就看不到file字段，说明是getFormRequirements或者文件选择的@onchange事件处理有问题，先解决数据存储的问题。

修复文件选择的onchange处理（如果数据没存进去） #

确保选择文件后，base64字符串正确更新到requirements数组里：

// 假设你的requirements是用ref声明的响应式数据
const formRequirements = ref([
  { id: 1, value: "41", requirements: [] }
]);

// 文件选择的事件处理函数
function handleFileChange(event, reqId) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    // 找到对应的需求项，更新file字段
    formRequirements.value = formRequirements.value.map(item => {
      if (item.id === reqId) {
        // 针对嵌套的requirements数组做修改
        const updatedRequirements = item.requirements.map(subReq => {
          if (subReq.id === 1) { // 替换成实际的子需求id
            return {...subReq, file: e.target.result};
          }
          return subReq;
        });
        return {...item, requirements: updatedRequirements};
      }
      return item;
    });
  };
  reader.readAsDataURL(file);
}

调用这个函数时，要传入对应的需求id：

<input type="file" @change="handleFileChange($event, 1)" />

方案一：继续用JSON格式发送 #

如果确认数据存在但发送后丢失，可能是base64字符串过长或含特殊字符导致的问题，可以尝试：

1. 对base64字符串进行编码处理后再放入JSON：

const processedRequirements = requirements.map(item => {
  return {
    ...item,
    requirements: item.requirements.map(subReq => {
      if (subReq.file) {
        return {...subReq, file: encodeURIComponent(subReq.file)};
      }
      return subReq;
    })
  };
});

后端接收后用decodeURIComponent解码即可。
2. 确保请求头的Content-Type保持application/json，现有代码这部分设置正确。

方案二：改用FormData发送（更可靠的文件传输方式） #

如果JSON方式仍有问题，改用FormData，不要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data边界：

async function submitForm() {
  const requirements = getFormRequirements();
  const costs = getFormCosts();
  
  const formData = new FormData();
  // 把嵌套对象转成JSON字符串存入FormData
  formData.append('requirements', JSON.stringify(requirements));
  formData.append('costs', JSON.stringify(costs));
  formData.append('formId', id);
  
  const response = await fetch(`${import.meta.env.VITE_BACK}/formsData/${id}`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`
      // 不要添加Content-Type: application/json
    },
    body: formData
  });
}

后端需要对应解析FormData，比如Node.js环境下用multer中间件，再把requirements字段的JSON字符串解析回数组结构。

内容的提问来源于stack exchange，提问作者Sébastien Merveille