// 假设商品的图片是 $relationBanners,$id是商品的id // $relationBanners的数据结构如： /** * Array *( * [0] => Array * ( * [id] => 1484314 * [goods_id] => 1173376 * [banner_url] => ./uploads/20160617/146612713857635322241f2.png * ) * *) */ $relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all(); // 对商品banner图进行处理 $p1 = $p2 = []; if ($relationBanners) { foreach ($relationBanners as $k => $v) { $p1[$k] = $v['banner_url']; $p2[$k] = [ 'url' => Url::toRoute('/banner/delete'), 'key' => $v['id'], ]; } } $model = new Banner; return $this->render('banner', [ 'model' => $model, 'p1' => $p1, 'p2' => $p2, 'id' => $id ]);
你可以看到p1是图片地址的集合，这里用于赋值给initialPreview
p2是一组url和key的集合，这里用于赋值给initialPreviewConfig
其中url是移除图片的请求地址
key是每个图片对应的id
此时我们视图文件中的pluginOptions应该是这样的
'pluginOptions' => [ // other code 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, // other code ],
注意设置initialPreviewAsData为true哦，不然等会创建图片后，预览图不会显示。
我们在一开始配置文件中配置了uploadUrl，该参数是异步上传的图片地址。
现在看上传界面应该是光秃秃的，我们选择一张图片后效果如上图2所示，
需要提醒的是，每张小图片上的上传是上传对应的小图片，input框（右下角）的上传和移除都是针对所有的图片的操作，一张也是上传，十张也是上传，我们这里只对多图上传的操作做一个必要的说明。
图片上传的地址以及上传需要的额外参数（如商品id）我们都准备好了，额外的参数配置项是uploadExtraData，具体见上面视图文件中的配置。
接着我们看 /goods/async-image 异步上传的程序实现
public function actionAsyncImage () { // 商品ID $id = Yii::$app->request->post('goods_id'); $p1 = $p2 = []; if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) { echo '{}'; return; } for ($i = 0; $i < count($_FILES['Banner']['name']['banner_url']); $i++) { $url = '/banner/delete'; $imageUrl = ''; //调用图片接口上传后返回图片地址 // 图片入库操作，此处不可以批量直接入库，因为后面我们还要把key返回 便于图片的删除 $model = new Banner; $model->goods_id = $id; $model->banner_url = $imageUrl; $key = 0; if ($model->save(false)) { $key = $model->id; } // $pathinfo = pathinfo($imageUrl); // $caption = $pathinfo['basename']; // $size = $_FILES['Banner']['size']['banner_url'][$i]; $p1[$i] = $imageUrl; $p2[$i] = ['url' => $url, 'key' => $key]; } echo json_encode([ 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, 'append' => true, ]); return; }
到此，单图和多图上传的工作我们也就完成了。
为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。
按照我们的配置，现在的预览图应该是这样的。
不说废话，我们看图片删除的程序（/banner/delete）实现
public function actionDelete () { if ($id = Yii::$app->request->post('key')) { $model = $this->findModel($id); $model->delete(); } Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; return ['success' => true]; }
需要提醒的是，key就是我们配置 initialPreviewConfig项时指定的key,你可以参考controller中的key，也可以参考异步上传成功后p2的key.
到此，yii2中多图上传的组件使用以及程序代码我们都给出了具体的实现。
以上所述是小编给大家介绍的Yii2组件之多图上传插件FileInput的详细使用教程的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: