Flutter向Node.js服务器上传图片返回undefined，求问题排查

核心问题：Node.js服务器未配置文件上传处理中间件 #

Express框架默认不会解析multipart/form-data类型的请求（文件上传依赖该格式），因此req.files会返回undefined。必须通过multer中间件来处理文件上传逻辑。

服务器端修复步骤 #

1. 安装multer依赖：

npm install multer

2. 修改路由代码，引入并配置multer：

const express = require('express');
const router = express.Router();
const multer = require('multer');

// 配置文件存储路径（需手动创建服务器端的uploads文件夹）
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

// 注意：upload.single('files')中的'files'要和Flutter端的字段名完全一致
router.post("/image", upload.single('files'), (req, res) => {
  // 单个文件用req.file获取，多文件用upload.array('files', 最大数量)搭配req.files
  console.log(req.file);
  res.send(req.file);
});

module.exports = router;

Flutter端需检查的细节 #

• 调用upload()前先判断文件是否存在，避免空指针异常：

Future upload()async{
  if(file == null) {
    print("请先选择图片");
    return;
  }
  Uri uri=Uri.parse("http://10.0.2.2:8000/image");
  http.MultipartRequest request = http.MultipartRequest("POST",uri);
  request.files.add(await http.MultipartFile.fromPath('files',file!.path));
  http.StreamedResponse response=await request.send();
  var responseBytes=await response.stream.toBytes();
  var responseString=utf8.decode(responseBytes);
  print(responseString);
}

• 确认网络连通性：Android模拟器用10.0.2.2访问本地服务器，iOS模拟器可改用localhost或电脑局域网IP。

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