React+Axios上传multipart/form-data报错，寻求排查方案

1. 先解决网络连接错误（ERR_CONNECTION_REFUSED） #

• 验证后端服务状态：打开浏览器访问 http://localhost:8080，确认服务正常运行在8080端口，若无法访问则重启后端服务，检查端口是否被占用。
• 修正请求URL：你的请求URL带有多余的 ?=，需改为 http://localhost:8080/audio，错误的URL会导致请求无法正确到达后端。

2. 后端错误（TypeError: Cannot read properties of undefined (reading '0')）修复 #

该错误是因为后端尝试读取某个未定义的数组下标，核心原因是未正确解析multipart/form-data请求，或字段名不匹配：

• 必须配置multer中间件：Express无法默认处理文件上传，需用multer解析form-data。示例配置：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置文件存储路径（提前创建uploads文件夹）
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, 'uploads/'),
  filename: (req, file, cb) => cb(null, Date.now() + '-' + file.originalname)
});
const upload = multer({ storage: storage });

// 接口字段名需与前端一致（示例为'audio'）
// 若上传单个文件用upload.single('audio')，此时用req.file而非req.files[0]
app.post('/audio', upload.array('audio', 1), (req, res) => {
  if (!req.files || req.files.length === 0) {
    return res.status(400).send('未上传文件');
  }
  // 后续业务逻辑
  res.status(200).send('文件上传成功');
});

app.listen(8080, () => console.log('服务运行在8080端口'));

• 检查字段名一致性：前端FormData中append的字段名（如'audio'）必须和后端multer配置的字段名完全一致，否则req.files会为undefined，触发下标读取错误。

3. 前端Axios请求修复 #

发送multipart/form-data时需遵循以下规范：

import axios from 'axios';

const handleFileUpload = async (file) => {
  const formData = new FormData();
  // 字段名与后端保持一致
  formData.append('audio', file);

  try {
    const response = await axios.post('http://localhost:8080/audio', formData, {
      // 禁止手动设置Content-Type，Axios会自动添加带boundary的正确头
      headers: {
        // 仅添加业务所需头（如Authorization），不要加Content-Type
      }
    });
    console.log('上传成功:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

// 文件选择回调
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) handleFileUpload(file);
};

• 直接传递File对象给FormData，不要尝试获取本地绝对路径（浏览器不允许访问）。
• 不要手动设置Content-Type: multipart/form-data，否则会丢失boundary参数，导致后端无法解析请求体。

4. 验证请求正确性 #

在浏览器开发者工具的Network面板中检查：

• 请求URL是否为http://localhost:8080/audio，请求方法为POST。
• Request Headers中的Content-Type是否包含multipart/form-data; boundary=xxxxxx（xxxxxx为随机边界字符串）。
• Form Data中是否存在上传的文件信息。

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