AngularJS与PHP文件上传连接中断及TypeError问题求助

看起来你在Ionic+AngularJS结合PHP实现文件上传时，碰到了连接中断和类型错误两个棘手问题，咱们一步步来拆解解决：

一、先处理「Cannot read property 'state_code' of null」类型错误 #

这个错误的核心很明确：在controllers.js第1718行，你尝试读取某个对象的state_code属性，但这个对象是null。结合错误栈里的services.js:298，大概率是你的文件上传API请求返回的数据出了问题：

1. 定位问题根源

   • 先在services.js第298行附近加日志，打印API返回的完整数据，确认是不是后端返回了null/undefined：

     console.log('上传接口返回数据:', response.data); // 放在请求成功回调的开头
     

   • 检查PHP后端的响应逻辑：确保无论上传成功/失败，都返回合法的JSON结构，绝对不能返回null或者空响应。比如：

     // 成功时
     echo json_encode(['state_code' => 200, 'message' => '上传完成']);
     // 失败时
     echo json_encode(['state_code' => 400, 'message' => '文件大小超出限制']);
     

2. 前端做防御性判断
   在控制器里访问state_code之前，先判断对象是否存在，避免空指针：

   // 把原来直接访问data.state_code的代码改成：
   if (data && data.state_code === 200) {
     // 处理成功逻辑
   } else {
     // 处理异常情况
     console.error('接口返回数据异常:', data);
   }
   

二、解决文件上传的连接中断问题 #

连接中断通常和请求配置、后端限制、设备权限有关，结合你的Ionic场景，按以下步骤排查：

1. 修正AngularJS的文件上传请求配置
   AngularJS的ng-model默认不支持<input type="file">的绑定，而且普通的JSON请求头无法处理文件上传，必须用FormData和正确的请求配置：

   • 先手动获取文件对象：

     // 在控制器里获取用户选择的文件
     var fileInput = document.getElementById('BrowserHidden');
     if (fileInput.files.length === 0) {
       alert('请先选择文件');
       return;
     }
     var formData = new FormData();
     formData.append('upload_file', fileInput.files[0]);
     

   • 发起请求时设置正确的headers和transform：

     $http.post('你的PHP上传接口地址', formData, {
       transformRequest: angular.identity, // 让AngularJS不修改FormData
       headers: {'Content-Type': undefined}, // 让浏览器自动生成multipart边界
       timeout: 30000 // 可选：设置更长的超时时间，避免大文件上传超时
     }).then(function(response) {
       // 处理成功响应
     }, function(error) {
       console.error('上传连接中断:', error);
       // 这里可以给用户提示网络或服务器问题
     });
     

2. 检查PHP后端的上传限制
   后端配置不足是文件上传中断的常见原因，修改php.ini里的以下参数：

   • upload_max_filesize = 10M（根据你的文件大小调整，比如改成20M）
   • post_max_size = 12M（要比upload_max_filesize大一点）
   • max_execution_time = 300（设置更长的脚本执行时间，单位秒）
   • max_input_time = 300（设置更长的输入处理时间）

   同时确保PHP脚本正确处理上传：

   // 先检查上传错误
   if ($_FILES['upload_file']['error'] !== UPLOAD_ERR_OK) {
     echo json_encode(['state_code' => 400, 'message' => '上传错误码：'.$_FILES['upload_file']['error']]);
     exit;
   }
   // 确保上传目录存在且有写入权限
   $uploadDir = './uploads/';
   if (!is_dir($uploadDir)) {
     mkdir($uploadDir, 0755, true);
   }
   $targetPath = $uploadDir . basename($_FILES['upload_file']['name']);
   // 移动临时文件到目标目录
   if (move_uploaded_file($_FILES['upload_file']['tmp_name'], $targetPath)) {
     echo json_encode(['state_code' => 200, 'message' => '上传成功']);
   } else {
     echo json_encode(['state_code' => 500, 'message' => '文件保存失败']);
   }
   

3. 检查Ionic/Cordova的设备权限
   如果是在真机上测试，确保APP有文件访问权限：

   • Android：在AndroidManifest.xml中添加权限

     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     

   • iOS：在info.plist中添加权限描述

     <key>NSPhotoLibraryUsageDescription</key>
     <string>需要访问相册选择图片上传</string>
     <key>NSCameraUsageDescription</key>
     <string>需要使用相机拍摄图片上传</string>
     

最后建议的排查步骤 #

1. 先用Postman或浏览器直接调用PHP上传接口，确认后端本身能正常处理上传
2. 测试小文件上传，排除大文件超时的问题
3. 真机测试时确保设备和服务器在同一网络（如果是本地服务器）

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