yii2中通过fileinput插件实现图片异步上传，需配置@uploadpath别名和assetdomain参数，安装插件后在视图中渲染widget并设置uploadurl与deleteurl，控制器提供actionuploadajax和actiondeleteimage处理上传与删除逻辑。
在Yii2项目中实现图片上传时，用户提交表单后长时间等待页面刷新，既影响体验又容易因超时中断上传。必须让文件上传过程脱离主请求流，做到选完即传、传完即显、失败可重试。
配置上传路径与域名别名
打开 /common/config/bootstrap.php，添加一行：
Yii::setAlias('@uploadPath', dirname(dirname(__DIR__)) . '/frontend/web/uploads');
再打开 /backend/config/params.php，在 $params 数组里加入：
'assetDomain' => 'http://localhost/yii2/advanced/frontend/web/uploads'
【@uploadPath 必须是绝对路径且有写权限，否则上传会静默失败】
安装并注册 fileinput 插件
执行命令安装插件：
composer require kartik-v/yii2-widget-fileinput "@dev"
安装完成后，在 /backend/config/main.php 的 modules 或 components 区域无需额外注册——该插件自动注册 widget 类。
构建多图异步上传视图
第一步：在控制器中准备初始预览数据
从数据库查出已关联的图片记录，组装为 $initialPreview 和 $initialPreviewConfig 数组，每个元素含 caption、size、url、key（用于删除）字段。
第二步：在视图中渲染 widget
使用 ActiveForm 绑定模型字段，启用 multiple 并配置 pluginOptions：
echo $form->field($model, 'image[]')->widget(FileInput::classname(), [
'options' => ['multiple' => true, 'accept' => 'image/*'],
'pluginOptions' => [
'initialPreview' => $initialPreview,
'initialPreviewConfig' => $initialPreviewConfig,
'uploadUrl' => ['/product/upload-ajax'],
'deleteUrl' => ['/product/delete-image'],
'allowedFileExtensions' => ['jpg', 'jpeg', 'png', 'gif'],
'overwriteInitial' => false,
]
]);
注意 uploadUrl 和 deleteUrl 必须指向两个独立的 controller action，且都返回 JSON 格式响应。
编写异步上传控制器逻辑
方法一：直接保存并返回结构化 JSON
在 ProductController.php 中新增 actionUploadAjax()：
public function actionUploadAjax()
{
$file = UploadedFile::getInstanceByName('image');
if (!$file) {
return json_encode(['error' => '未收到文件']);
}
$path = Yii::getAlias('@uploadPath') . '/' . date('Ym');
FileHelper::createDirectory($path, 0755);
$fileName = md5(uniqid()) . '.' . $file->extension;
$file->saveAs($path . '/' . $fileName);
$fullUrl = Yii::$app->params['assetDomain'] . '/' . date('Ym') . '/' . $fileName;
return json_encode([
'initialPreview' => [$fullUrl],
'initialPreviewConfig' => [[
'caption' => $file->name,
'size' => $file->size,
'url' => '/product/delete-image',
'key' => $fileName
]],
'append' => true
]);
}
方法二：存入图片表并返回带 key 的响应
创建 Images 模型实例，填入 url、module（如 'product'）、status=1，调用 save()；返回的 JSON 中 key 字段必须是数据库自增 ID，后续删除才可精准定位。
这一步操作起来很简单，直接把文件拖进去就行。
处理异步删除请求
在同一个控制器中添加 actionDeleteImage()：
public function actionDeleteImage()
{
$key = Yii::$app->request->post('key');
if (!$key) {
return json_encode(['error' => '缺少 key']);
}
$image = Images::findOne($key);
if ($image) {
$filePath = Yii::getAlias('@uploadPath') . '/' . $image->url;
if (file_exists($filePath)) {
unlink($filePath);
}
$image->delete();
}
return json_encode(['success' => true]);
}
fileinput 插件会在点击删除按钮时自动携带 key 参数发起 POST 请求，服务端只需按 key 查删即可。
