Angular 6用ng2-file-upload传视频至PHP后端时$_FILES为空求助

我来帮你排查这个视频上传的异常问题——图片能正常上传但视频不行，且PHP端var_dump($_FILES)返回空数组，这种情况大概率和文件大小限制、组件配置或者服务器安全规则有关，咱们一步步来定位解决：

1. 优先检查PHP的上传大小限制 #

视频文件通常比图片大很多，PHP默认的上传配置可能不足以支撑，你需要确认以下几个关键参数：

• 打开php.ini文件，查找并修改：
  • upload_max_filesize: 建议设置为大于你要上传的视频大小，比如200M
  • post_max_size: 这个值要比upload_max_filesize更大，比如250M
  • max_execution_time: 上传大文件需要更长时间，设置为300（5分钟）
  • max_input_time: 同样调整为300
• 修改后重启你的Web服务器（Apache/Nginx），然后通过phpinfo()查看当前配置是否生效。

2. 检查ng2-file-upload的组件配置 #

确认你的FileUploader配置有没有限制文件类型或大小：

const URL = global.getBasePathV2() + 'user/upload-file';
public uploader:FileUploader = new FileUploader({
  url: URL,
  additionalParameter: {'accessToken': userData.accessToken},
  // 新增允许的视频MIME类型，根据你支持的格式调整
  allowedMimeType: [
    'video/mp4', 
    'video/avi', 
    'video/mpeg', 
    'video/webm'
  ],
  // 设置最大文件大小，比如200MB（单位是字节）
  maxFileSize: 200 * 1024 * 1024
});

另外，你可以在组件里监听onErrorItem事件，看看组件有没有抛出错误：

this.uploader.onErrorItem.subscribe((item, response, status, headers) => {
  console.log('上传错误:', response, status);
});

3. 用浏览器开发者工具排查请求 #

打开浏览器的Network标签，上传视频时查看对应的请求：

• 检查请求头的Content-Type是否为multipart/form-data; boundary=xxxx（这是文件上传的正确编码类型）
• 查看请求的Payload部分，确认是否包含了视频文件的二进制数据
• 如果请求没有发送文件数据，说明组件没有正确处理视频文件，可能是类型不匹配或者大小超限

4. 排查服务器安全拦截 #

有些服务器的安全模块（比如Apache的mod_security、Nginx的安全规则）会拦截大文件或特定类型的上传：

• 查看Web服务器的错误日志（比如Apache的error.log、Nginx的error.log），有没有相关的拦截报错
• 可以临时关闭安全模块测试，确认是否是拦截导致的问题

5. 用原生表单测试后端接口 #

写一个简单的HTML表单，直接上传视频到同一个PHP接口，排除Angular组件的问题：

<form action="你的PHP接口地址" method="post" enctype="multipart/form-data">
  <input type="file" name="file" accept="video/*">
  <button type="submit">上传视频</button>
</form>

如果这个原生表单上传后$_FILES依然为空，那问题肯定在后端配置；如果能正常返回文件信息，那就是ng2-file-upload的配置需要调整。

附：你的相关代码整理 #

component.html

<div class="container"> 
  <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" href>Add Video</a> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-md-3"> 
      <h3>Select files</h3> 
      Single <input type="file" ng2FileSelect [uploader]="uploader" /> 
    </div> 
    <div class="col-md-9" style="margin-bottom: 40px"> 
      <h3>Upload queue</h3> 
      <p>Queue length: {{ uploader?.queue?.length }}</p> 
      <table class="table"> 
        <thead> 
          <tr> 
            <th width="50%">Name</th> 
            <th>Size</th> 
            <th>Progress</th> 
            <th>Status</th> 
            <th>Actions</th> 
          </tr> 
        </thead> 
        <tbody> 
          <tr *ngFor="let item of uploader.queue"> 
            <td><strong>{{ item?.file?.name }}</strong></td> 
            <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td> 
            <td *ngIf="uploader.isHTML5"> 
              <div class="progress" style="margin-bottom: 0;"> 
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> 
              </div> 
            </td> 
            <td class="text-center"> 
              <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> 
              <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> 
              <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span> 
            </td> 
            <td nowrap> 
              <button type="button" class="btn btn-success btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"> 
                <span class="glyphicon glyphicon-upload"></span> Upload 
              </button> 
              <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading"> 
                <span class="glyphicon glyphicon-ban-circle"></span> Cancel 
              </button> 
              <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()"> 
                <span class="glyphicon glyphicon-trash"></span> Remove 
              </button> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
      <div> 
        <div> 
          Queue progress: 
          <div class="progress" style=""> 
            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

component.ts

const URL = global.getBasePathV2() + 'user/upload-file';
public uploader:FileUploader = new FileUploader({url: URL, additionalParameter: {'accessToken': userData.accessToken}});

PHP端测试代码

<?php
var_dump($_FILES);
?>

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