Yii2的图片裁切小部件
推荐使用composer安装
composer require metalyoung/yii2-extension-image-tailor
不要把image
设置成file,看做文本即可,因为图片上传操作并没有经过业务的表,部件返回给input的实际上是个文本。
public function rules() {
return [
[['image'], 'string'],
];
}
<?= $form->field($model, 'image')->widget(\coderfixlab\cropper\Cropper::className(), [
'label' => '选择图片',
'imageUrl' => Yii::$app->tools->getImagesUrl($model->image), //页面展示的图片路径
'value'=>$model->image, //在input中作为表单值的图片路径
'cropperOptions' => [
//裁切尺寸
'width' => 518,
'height' => 250,
//预览尺寸
'preview' => [
'width' => 518,
'height' => 250,
],
],
'uploadOptions'=>[
'url'=>'/upload/upload-crop', //图片上传路径
'response'=>'res.url', //返回预览的完整图片地址
'attachment'=>'res.attachment' //返回给input中作为表单值的图片路径
],
'jsOptions' => [
'pos' => \yii\web\View::POS_END, // default is POS_END if not specified
'onClick' => 'function(event){
}'
],
]); ?>
图片上传到 uploadOptions
的url
地址中
会模拟表单提交image的文件域
参考处理代码
public function actionUploadCrop(){
if (Yii::$app->request->isPost) {
$file = $_FILES['image'];
$md5 = md5_file($file['tmp_name']);
$fileName = 'upload/'.date("Y/m").'/'.$md5;
Yii::$app->get("qiniu")->upload($file['tmp_name'],$fileName);
}
$fullUrl = Yii::$app->get("qiniu")->getDomain().'/'.$fileName;
return json_encode([
'code'=>0,
'msg'=>'上传成功',
'url' => $fullUrl,
'attachment'=>$fileName
]);
exit();
}
注意:必定返回的为在uploadOptions
中定义的url
和attachment
,但是并不唯一,当修改视图配置后对应返回格式也要修改
- 图片上传状态提示
- 文档完善
本项目基于 MIT License.