Yii2后台商品多图Banner需配置kartik-v/yii2-widget-fileinput，支持多图上传、预览、删除及关联商品ID存储；须正确构造initialPreview与initialPreviewConfig、区分同步/异步上传逻辑，并实现带物理删除的deleteUrl接口。
你需要在Yii2后台为商品添加多张Banner图，支持一次选多图上传、已上传图片预览、单张删除、保存时自动关联商品ID并存入独立图片表——这不是简单的文件提交，而是带状态管理的异步交互流程。
配置FileInput组件并绑定商品模型
先确认已通过Composer安装kartik-v/yii2-widget-fileinput：composer require kartik-v/yii2-widget-fileinput "@dev"。若未安装，后续所有操作都会报类找不到错误。
在视图文件（如views/goods/_form.php）中，使用ActiveForm绑定model的image[]属性，启用multiple模式：
echo $form->field($model, 'image[]')->widget(FileInput::classname(), ['options' => ['multiple' => true, 'accept' => 'image/*'], 'pluginOptions' => ['initialPreview' => $initialPreview, 'initialPreviewConfig' => $initialPreviewConfig, 'allowedFileExtensions' => ['jpg', 'jpeg', 'png', 'gif'], 'maxFileCount' => 8, 'overwriteInitial' => false]);
【$initialPreview和$initialPreviewConfig必须提前从数据库查出并构造好】，否则页面加载时不会显示已有图片，用户会误以为历史图片丢失。
Controller中准备预览数据与处理上传
编辑GoodsController的actionCreate和actionUpdate方法，在渲染视图前注入预览数组：
① 查询该商品当前所有图片记录（假设图片表名为goods_image，含goods_id、url、sort字段）；
② 遍历结果，组装$initialPreview = [ '/uploads/2026/08/01/abc.jpg', '/uploads/2026/08/02/def.png' ]；
③ 同步构造$initialPreviewConfig，每项含caption、width、url、key（即数据库id）、downloadUrl等键；
④ 将两个变量传入view：return $this->render('create', compact('model', 'initialPreview', 'initialPreviewConfig'));
这一步漏掉任何一环，前端都无法还原已存在的图片列表，用户只能重新上传，造成重复存储和体验断裂。
后端接收并持久化多图上传数据
方法一：同步提交方式（表单整体提交）
在GoodsController的actionCreate或actionUpdate中，判断是否收到$_FILES['Goods']['image']，用foreach遍历上传文件数组；
对每个临时文件调用move_uploaded_file()保存到/uploads/{yyyy}/{mm}/{dd}/目录下，并生成唯一文件名；
将新生成的url连同当前商品ID插入goods_image表，注意事务包裹防止部分写入失败导致数据不一致。
方法二：异步上传方式（推荐）
单独定义upload-image动作：public function actionUploadImage() { $file = UploadedFile::getInstanceByName('image'); if ($file) { $fileName = date('YmdHis') . '_' . uniqid() . '.' . $file->extension; $path = Yii::getAlias('@webroot/uploads/') . date('Y/m/d/') . '/'; FileHelper::createDirectory($path); $file->saveAs($path . $fileName); return json_encode(['url' => '/uploads/' . date('Y/m/d/') . '/' . $fileName]); } return json_encode(['error' => '上传失败']); }
此时FileInput的pluginOptions里需配置'uploadUrl' => Url::to(['/goods/upload-image'])，且删掉initialPreviewConfig里的key字段，否则删除操作无法匹配真实ID。
【异步上传时务必关闭pluginOptions中的'autoReplace'，否则第二次上传会覆盖第一次预览】
实现图片删除逻辑（含物理删除开关）
FileInput默认点击×图标仅移除DOM节点，不发请求。要真正删服务器文件，需启用pluginOptions中的'deleteUrl'：
'deleteUrl' => Url::to(['/goods/delete-image']),
并在GoodsController中新增actionDeleteImage()，接收POST参数key（即goods_image表主键），查出对应url，用unlink()删除物理文件，再执行DELETE FROM goods_image WHERE id = :id。
如果业务要求保留原始文件只断开关联，就把unlink()那行注释掉，仅执行数据库删除即可。
这一步不做，用户看到的“删除”只是假动作，磁盘空间持续膨胀，且下次进入编辑页仍会加载已“删掉”的图。
