Yii2多文件上传扩展名检查实现及AngularJS上传验证失效求助

一、前端JavaScript实现（含前端校验） #

文件选择与校验逻辑 #

给文件输入框绑定change事件，先在前端完成扩展名和大小校验，避免无效请求：

// 监听文件选择事件
document.getElementById('multiFileInput').addEventListener('change', function(e) {
  // 允许的文件扩展名
  const allowedExts = ['png', 'jpg', 'jpeg', 'pdf'];
  // 最大文件大小：5MB
  const maxSize = 5 * 1024 * 1024;
  const selectedFiles = e.target.files;

  // 遍历文件逐一校验
  for (const file of selectedFiles) {
    const fileExt = file.name.split('.').pop().toLowerCase();
    // 扩展名校验
    if (!allowedExts.includes(fileExt)) {
      alert(`文件 ${file.name} 格式非法，仅支持 ${allowedExts.join('、')}`);
      e.target.value = '';
      return;
    }
    // 文件大小校验
    if (file.size > maxSize) {
      alert(`文件 ${file.name} 超过5MB限制`);
      e.target.value = '';
      return;
    }
  }

  // 校验通过，构建FormData准备上传
  const formData = new FormData();
  for (const file of selectedFiles) {
    formData.append('brochure_file[]', file);
  }

  // 发送AJAX请求
  fetch('/your-yii2-controller/upload', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => console.log('上传结果:', data))
  .catch(err => console.error('上传失败:', err));
});

对应HTML #

<input type="file" id="multiFileInput" multiple accept=".png,.jpg,.jpeg,.pdf">

二、Yii2后端处理逻辑 #

模型验证规则 #

// UpdateForm.php
class UpdateForm extends Model
{
    public $brochure;

    public function rules()
    {
        return [
            [['brochure'], 'file',
                'skipOnEmpty' => true,
                'extensions' => 'png, jpg, jpeg, pdf',
                'maxSize' => 5 * 1024 * 1024,
                'checkExtensionByMimeType' => false,
                'maxFiles' => 10 // 设置允许的最大上传文件数，0表示无限制
            ],
        ];
    }
}

控制器处理方法 #

// 控制器上传方法
public function actionUpload()
{
    $form = new UpdateForm();
    $form->brochure = UploadedFile::getInstancesByName('brochure_file');

    if ($form->validate()) {
        // 验证通过，保存文件
        foreach ($form->brochure as $file) {
            $savePath = Yii::getAlias('@webroot/uploads/') . $file->baseName . '.' . $file->extension;
            $file->saveAs($savePath);
        }
        return $this->asJson(['status' => 'success', 'msg' => '上传完成']);
    } else {
        // 返回验证错误
        return $this->asJson(['status' => 'error', 'errors' => $form->errors]);
    }
}

问题根源 #

1. 前端语法错误：原代码中fd.append语句缺少闭合括号，导致FormData未正确构建
2. 未触发模型验证：直接赋值后抛出异常，未调用$form->validate()，验证规则完全未执行
3. AngularJS请求配置缺失：发送FormData时未设置正确的请求头和转换规则，后端可能无法解析

修复步骤 #

1. 修正前端AngularJS代码 #

// ng-component.js
const fd = new FormData();
for (let i = 0; i < $scope.brochureList.length; i++) {
    console.log($scope.brochureList[i].image_url);
    // 修复语法错误，确保传入File对象
    fd.append('brochure_file[]', $scope.brochureList[i].image_url[0]);
}

// 发送请求时需配置FormData专属参数
$http.post('/your-controller/update', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
})
.then(function(response) {
    console.log('上传成功', response.data);
})
.catch(function(error) {
    console.error('上传失败', error);
});

2. 修正后端控制器代码 #

// Controller file
$form = new UpdateForm();
$form->brochure = UploadedFile::getInstancesByName('brochure_file');

// 触发模型验证，验证失败时返回错误
if (!$form->validate()) {
    throw new \Exception(var_export($form->errors, 2), 1);
}

// 验证通过后执行后续逻辑...

3. 优化模型规则（可选） #

将maxFiles设为合理数值（如10），避免无限制上传的潜在风险，规则同前文的UpdateForm示例。

内容的提问来源于stack exchange，提问作者Wing Hang Khoo