Flutter端上传图片到NodeJS+Multer后端失败该如何解决？

核心问题梳理 #

• 1. Flutter端异步函数调用未加await，导致上传请求还未执行完成就触发后续逻辑，请求被中断
• 2. Flutter的MultipartRequest只添加了图片文件，未携带后端需要的name/price/detail/quantity等表单字段，后端校验不通过
• 3. 移动端默认禁止明文HTTP请求，你用的http://192.168.1.8属于明文请求，会被系统拦截
• 4. NodeJS接口逻辑执行完成后未返回响应，导致Flutter端请求超时
• 5. 两端缺少错误日志输出，无法定位具体错误原因

修复代码 #

Flutter端修改 #

1. 调整upload函数，添加表单字段、错误日志打印，返回请求结果

Future<http.StreamedResponse> upload(File imageFile, Product product) async {
  var stream = http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
  var length = await imageFile.length();
  var uri = Uri.parse("http://192.168.1.8:8081/products/add-product");
  var request = http.MultipartRequest("POST", uri);
  // 添加图片文件
  var multipartFile = http.MultipartFile('photo', stream, length, filename: basename(imageFile.path));
  request.files.add(multipartFile);
  // 新增：携带后端需要的表单字段
  request.fields['name'] = product.name;
  request.fields['price'] = product.price.toString();
  request.fields['detail'] = product.detail;
  request.fields['quantity'] = product.quantity.toString();
  // 发送请求
  var response = await request.send();
  // 打印请求结果方便排查
  print("上传状态码：${response.statusCode}");
  final respStr = await response.stream.bytesToString();
  print("后端返回内容：$respStr");
  return response;
}

2. 调整调用逻辑，添加await，必须在异步函数中执行

if(_image != null && _image.path.isNotEmpty){
  // 等待上传请求执行完成再执行后续逻辑
  await upload(_image, product);
  _addProduct(context, product);
}

3. 配置移动端网络权限

• 安卓端：在android/app/src/main/AndroidManifest.xml中添加配置

<!-- 新增网络权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<application
  <!-- 新增允许明文HTTP请求 -->
  android:usesCleartextTraffic="true"
  ...其他配置
>

• iOS端：在ios/Runner/Info.plist中添加配置

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

NodeJS端修改 #

添加错误判断和响应返回，避免请求挂起

router.post('/add-product', upload.single('photo'),async (req,res)=>{
  try {
    // 新增：判断是否接收到图片
    if(!req.file) {
      return res.status(400).json({code: 400, msg: '未接收到上传的图片'});
    }
    console.log(req.file);
    const product = new Product({
      name : req.body.name,
      price : req.body.price,
      detail : req.body.detail,
      quantity : req.body.quantity,
      photo : req.file.path 
    });
    // 新增：保存数据后返回响应
    await product.save();
    res.status(200).json({code: 200, msg: '上传成功', data: product});
  } catch (err) {
    console.error(err);
    res.status(500).json({code: 500, msg: '服务器错误', error: err.message});
  }
});

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