yii2多图上传组件的使用教程

2023-09-13 01:50:05 155

最近在使用yii2开发一个表单页面的时候，有多图上传的需求，稍微找了找这方面的组件，基本都安利fileInput这个组件，于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中发现还是有不少小细节需要注意的，于是记录一下使用的过程。

yii2-widget-fileinput这个库的github地址在这里，安装的部分就很常规了，按文档走就可以了。

我们来看官方文档展示的几个常规操作：

usekartik\widgets\FileInput
//or'usekartikile\FileInput'ifyouhaveonlyinstalledyii2-widget-fileinputinisolation
//使用ActiveForm和model绑定的单张图片示例
echo$form->field($model,'avatar')->widget(FileInput::classname(),[
'options'=>['accept'=>'image/*'],
]);
//多图上传示例
echo'AddAttachments';
echoFileInput::widget([
'model'=>$model,
'attribute'=>'attachment_1[]',
'options'=>['multiple'=>true]
]);
//不绑定model的使用方法
echo'UploadDocument';
echoFileInput::widget([
'name'=>'attachment_3',
]);
//不可点击的示例
echo'SelectAttachment';
echoFileInput::widget([
'name'=>'attachment_4',
'disabled'=>true
]);

而这些都是常规操作，我们来设想一下，我们要完成淘宝的商品添加，有个商品表，有着一对多关系的若干张图片，这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的，那么我们可以这么配置我们的fileInput组件

field($model,'image[]')->label($label)->widget(FileInput::classname(),[
//'name'=>'ImgSelect',
'language'=>'zh-CN',
'options'=>['multiple'=>true,'accept'=>'image/*'],
'pluginOptions'=>[
'initialPreview'=>$initialPreview,
'initialPreviewConfig'=>$initialPreviewConfig,
'allowedPreviewTypes'=>['image'],
'allowedFileExtensions'=>['jpg','gif','png'],
'previewFileType'=>'image',
'overwriteInitial'=>false,
'browseLabel'=>'选择图片',
'msgFilesTooMany'=>"选择上传的图片数量({n})超过允许的最大图片数{m}！",
'maxFileCount'=>5,//允许上传最多的图片5张
'maxFileSize'=>2048,//限制图片最大200kB
'uploadUrl'=>Url::to(['/upload/image']),
//'uploadExtraData'=>['testid'=>'listimg'],
'uploadAsync'=>true,//配置异步上传还是同步上传
],
'pluginEvents'=>[
'filepredelete'=>"function(event,key){
return(!confirm('确认要删除'));
}",
'fileuploaded'=>'function(event,data,previewId,index){
$(event.currentTarget.closest("form")).append(data.response.imgfile);
}',
'filedeleted'=>'function(event,key){
$(event.currentTarget.closest("form")).find("#"+key).remove();
return;
}',
]
]);?>

我们在控制器配置好图片浏览的配置，传入进来。代码里的关键点我已经加上了配置，我们可以看到，这时异步上传的url已经配置到了upload/image这个控制器里，而我们也在删除，上传等操作完成时加上了js的回调。

如上所述，我们罗列了一些都是组件FileInput的基本属性和设置，如有所需，可查看文档看属性的详细说明。

看下上传图片的控制器里，我们是怎么写actionImage这个函数的

/**
*上传图片到临时目录
*@returnstring
*@throws\yii\base\Exception
*/
publicfunctionactionImage()
{
if(Yii::$app->request->isPost){
$res=[];
$initialPreview=[];
$initialPreviewConfig=[];
$images=UploadedFile::getInstancesByName("UploadImage[image]");
if(count($images)>0){
foreach($imagesas$key=>$image){
if($image->size>2048*1024){
$res=['error'=>'图片最大不可超过2M'];
returnjson_encode($res);
}
if(!in_array(strtolower($image->extension),array('gif','jpg','jpeg','png'))){
$res=['error'=>'请上传标准图片文件,支持gif,jpg,png和jpeg.'];
returnjson_encode($res);
}
$dir='/uploads/temp/';
//生成唯一uuid用来保存到服务器上图片名称
$pickey=ToolExtend::genuuid();
$filename=$pickey.'.'.$image->getExtension();
//如果文件夹不存在，则新建文件夹
if(!file_exists(Yii::getAlias('@backend').'/web'.$dir)){
FileHelper::createDirectory(Yii::getAlias('@backend').'/web'.$dir,777);
}
$filepath=realpath(Yii::getAlias('@backend').'/web'.$dir).'/';
$file=$filepath.$filename;
if($image->saveAs($file)){
$imgpath=$dir.$filename;
/*Image::thumbnail($file,100,100)
->save($file.'_100x100.jpg',['quality'=>80]);
*/
//array_push($initialPreview,"");
$config=[
'caption'=>$filename,
'width'=>'120px',
'url'=>'../upload/delete',//serverdeleteaction
'key'=>$pickey,
'extra'=>['filename'=>$filename]
];
array_push($initialPreviewConfig,$config);
$res=[
"initialPreview"=>$initialPreview,
"initialPreviewConfig"=>$initialPreviewConfig,
"imgfile"=>"",
'filename'=>$filename,
'imagePath'=>$imgpath,
];
}
}
}
returnjson_encode($res);
}
}

到此，多图上传的工作我们也就完美的实现了。

为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。

上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。

至于删除函数就不讲了，只要在浏览里配置上删除的url，也是一样的操作咯。

总结

以上所述是小编给大家介绍的yii2多图上传组件的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

yii2多图上传组件的使用教程

热门推荐

随机推荐