Flutter Web上传PDF至PHP服务器报错求助

我有一个可运行在Web端的Android应用，需要实现Web端PDF文件上传功能。目前Android端向Web服务器上传文件正常，但Web端上传时出现错误，相关代码和报错信息如下：

Flutter上传代码 #

Future<int> uploadFileWeb(String likePage,file,String filename,Map<String,String> data)async{

var request = http.MultipartRequest(
  'POST', _getUtl(likePage),
);
Map<String,String>headers= _getHeaders();
headers["Content-type"]="multipart/form-data";
request.headers.addAll(headers);
if(data.isNotEmpty){
  request.fields.addAll(data);
}

request.files.add(
  http.MultipartFile.fromBytes(
      "file", file,
      contentType:MediaType('files', 'pdf')
  ),
);

var response = await request.send();
if(response.statusCode==200){
  await response.stream.bytesToString().then((value) {
    print(value);
    var jsonResponse = json.decode(value);
    fromJson(jsonResponse['result']);
  });
  return 1;
}else{
  return 0;
}
}

PHP接收代码 #

public function uploadFile()
{
    $NAMFPOST = "file";

    $uploadDir = 'files/'; // مجلد حفظ الملفات

    $ddd = $_FILES[$NAMFPOST]["name"];

    $FILE_PATH = $_FILES[$NAMFPOST]["tmp_name"];  // Full path to your local file
    $uploadedFile = $uploadDir . basename($_FILES['file']['name']);

    if (move_uploaded_file($FILE_PATH, $uploadedFile)) {
        return 'File uploaded successfully! ' . $ddd;
    } else {
        return 'Error uploading file!';
    }
}

报错信息 #

PHP报错 #

Undefined array key "file"
Trying to access array offset on value of type null in
...............................

Flutter报错 #

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
dart-sdk/lib/_internal/js_dev_runtime/patch/convert_patch.dart 38:5          _parseJson
dart-sdk/lib/convert/json.dart 610:36                                        convert
dart-sdk/lib/convert/json.dart 216:41                                        decode
packages/yourdoctor/serves/getDataApi.dart 113:33                            <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 634:7                                    [_complete]
dart-sdk/lib/async/stream.dart 1094:13                                       <fn>
dart-sdk/lib/async/zone.dart 1582:9                                          runGuarded
dart-sdk/lib/async/stream_impl.dart 392:7                                    sendDone
dart-sdk/lib/async/stream_impl.dart 402:7                                    [_sendDone]
dart-sdk/lib/async/stream_impl.dart 291:7                                    [_close]
dart-sdk/lib/async/stream_transformers.dart 87:11                            [_close]
dart-sdk/lib/async/stream_transformers.dart 21:5                             close
dart-sdk/lib/convert/string_conversion.dart 241:5                            close
dart-sdk/lib/convert/string_conversion.dart 295:7                            close
dart-sdk/lib/convert/chunked_conversion.dart 78:5                            close
dart-sdk/lib/async/stream_transformers.dart 132:7                            [_handleDone]
dart-sdk/lib/async/zone.dart 1582:9                                          runGuarded

问题排查与解决方案 #

核心问题分析 #

1. Flutter Web手动设置Content-Type: multipart/form-data会覆盖MultipartRequest自动生成的带boundary的请求头，导致PHP无法解析表单数据，这是Undefined array key "file"的根本原因。
2. Flutter端尝试解析非JSON格式的响应，触发JSON解码错误。
3. PDF的MediaType设置错误，PHP端未做参数存在性校验。

Flutter代码修正 #

Future<int> uploadFileWeb(String likePage, List<int> file, String filename, Map<String,String> data)async{
  var request = http.MultipartRequest(
    'POST', _getUtl(likePage),
  );
  Map<String,String> headers = _getHeaders();
  // 移除手动设置的Content-Type，MultipartRequest会自动生成带boundary的正确头
  request.headers.addAll(headers);
  
  if(data.isNotEmpty){
    request.fields.addAll(data);
  }

  request.files.add(
    http.MultipartFile.fromBytes(
      "file", 
      file,
      filename: filename, // 明确传递文件名
      contentType: MediaType('application', 'pdf') // 修正PDF标准MediaType
    ),
  );

  var response = await request.send();
  final responseBody = await response.stream.bytesToString();
  print(responseBody);
  
  if(response.statusCode==200){
    try {
      var jsonResponse = json.decode(responseBody);
      fromJson(jsonResponse['result']);
    } catch (e) {
      // 兼容非JSON响应场景
      print('响应非JSON格式: $e');
    }
    return 1;
  }else{
    print('上传失败，状态码: ${response.statusCode}');
    return 0;
  }
}

PHP代码修正 #

public function uploadFile()
{
    $NAMFPOST = "file";
    $uploadDir = 'files/';

    // 确保上传目录存在，不存在则创建
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }

    // 校验文件是否正常上传
    if (!isset($_FILES[$NAMFPOST]) || $_FILES[$NAMFPOST]['error'] !== UPLOAD_ERR_OK) {
        return json_encode(['status' => 'error', 'message' => '文件未上传或上传失败']);
    }

    $fileName = basename($_FILES[$NAMFPOST]['name']);
    $FILE_PATH = $_FILES[$NAMFPOST]["tmp_name"];
    $uploadedFile = $uploadDir . $fileName;

    if (move_uploaded_file($FILE_PATH, $uploadedFile)) {
        return json_encode(['status' => 'success', 'message' => 'File uploaded successfully! ' . $fileName, 'result' => $uploadedFile]);
    } else {
        return json_encode(['status' => 'error', 'message' => 'Error uploading file!']);
    }
}

额外注意事项 #

• 确保PHP服务器的files/目录拥有写入权限（建议设置为755）。
• 检查PHP配置中的upload_max_filesize和post_max_size，确保数值大于要上传的PDF文件大小。
• Flutter Web端需确保file参数是正确的文件字节数据（可通过file_picker等插件获取）。

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