AngularJS调用PHP API上传图片时出现500错误求助

我一看你这代码就知道问题出在哪了——Postman能成功是因为它自动帮你处理了multipart/form-data的正确格式，但你的AngularJS代码里有几个致命的错误，导致后端PHP无法解析请求，直接返回500了。下面给你一步步拆解问题，再给你修正后的代码：

核心错误点分析 #

1. ng-model不能直接绑定文件输入框
   AngularJS的ng-model不支持直接绑定<input type="file">，文件对象是特殊的二进制类型，ng-model根本拿不到正确的文件数据，你console.log(profile_picture)出来的大概率是个空值或者无效对象。

2. 用JSON.stringify发送文件完全错误
   文件是二进制数据，不能转成JSON字符串来发送，这完全不符合multipart/form-data的要求。而且你手动设置了Content-Type: multipart/form-data，却没加浏览器自动生成的边界分隔符，后端PHP根本没法解析这个请求。

3. 没必要拆成两个请求
   你把文本数据和文件分开成PUT、POST两个请求完全没必要，直接把所有数据打包成一个表单请求发送就行。

修正后的前端代码 #

先改表单，去掉无效的ng-model，用onchange事件获取文件，同时加个图片预览：

<form class="updateUserInformation" ng-submit="updateProfile(userData.display_name, account.username)" flex="100" layout="row" >
  <div>
    <!-- 用onchange绑定文件选择事件，去掉无效的ng-model -->
    <input type="file" onchange="angular.element(this).scope().handleFileSelect(this.files)">
    <!-- 预览选中的图片 -->
    <img ng-src="{{userData.profilePicturePreview}}" width="150px" style="border-radius: 20px" ng-if="userData.profilePicturePreview">
  </div>
  <div>
    <md-input-container class="md-block">
      <label>Schermnaam</label>
      <input type="text" ng-model="userData.display_name" width="100%" required autofocus>
    </md-input-container>
    <div>
      <md-button class="md-button md-primary md-raised" type="submit">Submit</md-button>
    </div>
  </div>
</form>

修正后的控制器代码 #

用FormData来正确包装表单数据，这是发送multipart/form-data请求的标准方式：

controller('profileController', function($scope) {
  // 处理文件选择，获取文件对象并生成预览图
  $scope.handleFileSelect = function(files) {
    if (files.length > 0) {
      // 保存选中的文件对象
      $scope.userData.profile_picture = files[0];
      // 生成预览图（可选）
      var reader = new FileReader();
      reader.onload = function(e) {
        $scope.$apply(function() {
          $scope.userData.profilePicturePreview = e.target.result;
        });
      };
      reader.readAsDataURL(files[0]);
    }
  };

  $scope.updateProfile = function(display_name, id) {
    // 先检查是否选择了文件
    if (!$scope.userData || !$scope.userData.profile_picture) {
      console.error('请先选择要上传的图片！');
      return;
    }

    // 创建FormData对象，这是上传文件的正确姿势
    var formData = new FormData();
    formData.append('displayName', display_name);
    formData.append('profilePicture', $scope.userData.profile_picture);
    formData.append('id', id); // 把用户ID也传进去

    var xhr = new XMLHttpRequest();
    var url = '你的实际API地址'; // 替换成你的PHP接口URL
    xhr.open('POST', url, true);

    // 关键：不要手动设置Content-Type！浏览器会自动加上正确的边界符
    // xhr.setRequestHeader("Content-Type", "multipart/form-data"); // 这行必须删掉！

    // 监听请求状态
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log('上传成功！');
        // location.reload(); // 上传成功后再刷新页面
      } else {
        console.error('上传失败，状态码：', xhr.status);
      }
    };

    xhr.onerror = function() {
      console.error('请求出错了！');
    };

    // 发送FormData
    xhr.send(formData);
  };
});

额外提醒（后端PHP） #

确保你的PHP后端能正确接收：

• 用$_FILES['profilePicture']获取上传的文件
• 用$_POST['displayName']和$_POST['id']获取文本数据
• 检查php.ini的upload_max_filesize和post_max_size配置，确保文件大小上限足够

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