Layui+cropper实现图片裁剪并上传到阿里云OSS

实现效果：

Html:

<div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block" style="width: 600px">
            <input type="hidden" name="photo" value="">
            <button type="button" class="layui-btn" id="uploadImg">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <div style="padding-left: 110px; padding-top: 10px;" id="show_photo">

        </div>
    </div>

js:
插件下载地址

<script>
    layui.config({
        base: '/static/cropper/' //layui自定义layui组件目录
    }).use(['form', 'croppers'], function () {
        var $ = layui.jquery
            , form = layui.form
            , croppers = layui.croppers
            , layer = layui.layer
            , laydate = layui.laydate;
        var upload = layui.upload;
        //图片上传
        croppers.render({
            elem: '#uploadImg'
            , title: '图片上传'//弹窗标题
            , saveW: 320       //保存宽度
            , saveH: 240
            , minCropBoxWidth: 320//裁剪最小宽度
            , minCropBoxHeight: 240//裁剪喜小高度
            , mark: 4 / 3    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "upload-img"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (res) {
                if (res.code == 0) {
                    $("input[name='photo']").val(res.data[0]);
                    $('#show_photo').html('<p><img alt="图片展示" src="' + res.data[0] + '"></p>');
                } else {
                    layer.msg('图片上传失败！ErrorMsg:' + res.msg, {icon: 2});
                }
            }
        });
    });
</script>

php:
阿里云oss官网文档

public function actionUploadImg()
    {
        $request = \Yii::$app->request;
        if ($request->isPost) {
            \Yii::$app->response->format = Response::FORMAT_JSON;

            //提交输入框名称
            $fileInputName = $request->get('filename', 'file');
            $file = UploadedFile::getInstanceByName($fileInputName);

            if ($file->size > 1024 * 1024 * 10) {
                return ['code' => 1, 'msg' => '图片最大不可超过10M'];
            }
            if (!in_array(strtolower($file->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
                return ['code' => 1, 'msg' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
            }

            $saveFilePath = rtrim(Yii::getAlias("@backend"), '/') . '/runtime/hospital/';

            if (!file_exists($saveFilePath)) {
                try {
                    FileHelper::createDirectory($saveFilePath, 0777, true);
                } catch (\Exception $e) {
                    return ['code' => 1, 'msg' => '目录创建失败，' . $e->getMessage()];
                }
            }
            //文件名
            $filename = date('YmdHis') . substr(md5($file->getBaseName()), 0, 8) . mt_rand(1000, 9999) . '.' . $file->getExtension();
            //保存文件
            $file->saveAs($saveFilePath . $filename);

            $file = $filename;

            $ossFilePath = rtrim(Yii::$app->params['oss_bucket_dir'], '/');

            //文件绝对路径
            $ossFileFullPath = $ossFilePath . '/' . $file;

            // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。
            $accessKeyId = Yii::$app->params['oss_access_key_id'];
            $accessKeySecret = Yii::$app->params['oss_access_key_secret'];
            // Endpoint以杭州为例，其它Region请按实际情况填写。
            $endpoint = Yii::$app->params['oss_endpoint'];
            // 设置存储空间名称。
            $bucket = Yii::$app->params['oss_bucket'];
            // 设置文件名称。
            $object = $ossFileFullPath;
            // <yourLocalFile>由本地文件路径加文件名包括后缀组成，例如/users/local/myfile.txt。
            $filePath = $saveFilePath . $file;

            // 设置文件的访问权限为公共读，默认为继承Bucket。
            $acl = "public-read";

            $option = [
                OssClient::OSS_CONTENT_TYPE => 'image/jpg'
            ];

            //文件URL
            $fileUrl = rtrim(Yii::$app->params['oss_host']) . '/' . $ossFileFullPath;

            try {
                $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
                $ossClient->uploadFile($bucket, $object, $filePath, $option);
                $ossClient->putObjectAcl($bucket, $object, $acl);
                return ['code' => 0, 'data' => [$fileUrl]];
            } catch (OssException $e) {
                return ['code' => 1, 'msg' => $e->getMessage()];
            }
        }
    }