React通过axios向NodeJS传表单数据与文件时文件为空的问题求解

不需要单独发起文件请求，你当前的文件传输失败是三个写法错误共同导致的：

• 错误的axios参数结构：axios.post的标准参数顺序是(请求地址, 请求体数据, 请求配置)，你现在把headers、data全塞进了第三个参数的配置对象里，实际发出去的请求体根本不是你构造的业务数据
• 手动硬编码Content-Type: multipart/form-data：multipart请求的请求头必须包含浏览器自动生成的boundary边界值，手动写死的请求头没有这个参数，Node端的解析组件根本无法正确拆分请求体内容
• 直接把普通JS对象作为带文件的请求体传输：普通对象里引用的File对象不会被自动序列化为表单可识别的格式，必须通过浏览器原生FormDataAPI构造请求体

1. 替换你当前的请求体构造逻辑，用FormData承载所有字段：

   const formData = new FormData();
   // 依次追加普通类型字段
   formData.append('amount', amount);
   formData.append('invoiceDate', invoiceDate);
   formData.append('memo', memo);
   // 追加文件字段，register拿到的文件是FileList类型，需要取数组第一项的File对象
   formData.append('file', fileList[0]);
   

2. 调整axios请求的参数顺序，删除手动设置的multipart/form-data请求头：

   await axios.post(
     `${url.REQ_URL}/bills/add`,
     formData,
     {
       headers: {
         'Accept': 'application/json'
         // 不要手动配置Content-Type，浏览器会自动生成带boundary的正确请求头
       }
     }
   )
   

3. 确认Node端已配置专门的multipart/form-data解析中间件（比如multer），如果没有配置解析组件，就算前端传参正确，也无法读取到文件内容。

不需要为文件单独发起独立的POST请求，所有字符串、数字、文件字段都可以通过同一个FormData实例一次性传递，单独拆分请求反而会增加网络开销、提升前后端数据一致性的维护成本。

你当前日志里看到的{ amount: '10', invoiceDate: '2021-04-02', memo: '', file: { '0': {} } }，本质就是错误传参导致的：Node端根本没收到真实的文件二进制流，只是拿到了axios序列化配置对象时生成的无效占位内容。

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