优化头像上传

app/Http/Controllers/Api/SystemController.php

@@ -368,8 +368,15 @@ class SystemController extends AbstractController
      * @apiGroup system
      * @apiName imgupload
      *
-     * @apiParam {String} image64         图片base64
+     * @apiParam {File} image               post-图片对象
-     * @apiParam {String} filename        文件名
+     * @apiParam {String} [image64]         post-图片base64（与'image'二选一）
+     * @apiParam {String} filename          post-文件名
+     * @apiParam {Number} [width]           压缩图片宽（默认0）
+     * @apiParam {Number} [height]          压缩图片高（默认0）
+     * @apiParam {String} [whcut]           压缩方式
+     * - 1：裁切（默认，宽、高非0有效）
+     * - 0：缩放
+     * - -1或'auto'：保持等比裁切
      *
      * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
      * @apiSuccess {String} msg     返回信息（错误描述）
@@ -380,9 +387,12 @@ class SystemController extends AbstractController
         if (User::userid() === 0) {
             return Base::retError('身份失效，等重新登录');
         }
-        $scale = [intval(Request::input('width')), intval(Request::input('height'))];
+        $width = intval(Request::input('width'));
-        if (!$scale[0] && !$scale[1]) {
+        $height = intval(Request::input('height'));
+        $whcut = intval(Request::input('whcut', 1));
         $scale = [2160, 4160, -1];
+        if ($width > 0 || $height > 0) {
+            $scale = [$width, $height, $whcut];
         }
         $path = "uploads/user/picture/" . User::userid() . "/" . date("Ym") . "/";
         $image64 = trim(Base::getPostValue('image64'));

app/Module/Base.php

@@ -2196,7 +2196,7 @@ class Base
                     if ($width > 0 || $height > 0) {
                         $scaleName = "_{WIDTH}x{HEIGHT}";
                         if (isset($param['scale'][2])) {
-                            $scaleName .= $param['scale'][2];
+                            $scaleName .= "_c{$param['scale'][2]}";
                         }
                     }
                 }
@@ -2370,7 +2370,7 @@ class Base
                     if ($width > 0 || $height > 0) {
                         $scaleName = "_{WIDTH}x{HEIGHT}";
                         if (isset($param['scale'][2])) {
-                            $scaleName .= $param['scale'][2];
+                            $scaleName .= "_c{$param['scale'][2]}";
                         }
                     }
                 }

resources/assets/js/components/ImgUpload.vue

@@ -90,6 +90,8 @@
             },
             height: {
             },
+            whcut: {
+            },
             type: {
             },
             http: {
@@ -110,10 +112,6 @@
         data () {
             return {
                 actionUrl: $A.apiUrl('system/imgupload'),
-                params: {
-                    width: this.width,
-                    height: this.height
-                },
                 multiple: this.num > 1,
                 visible: false,
                 browseVisible: false,
@@ -176,10 +174,15 @@
             },
 
             uploadParams() {
+                let params = {
+                    width: this.width,
+                    height: this.height,
+                    whcut: this.whcut,
+                };
                 if (Object.keys(this.otherParams).length > 0) {
-                    return Object.assign(this.params, this.otherParams);
+                    return Object.assign(params, this.otherParams);
                 } else {
-                    return this.params;
+                    return params;
                 }
             }
         },
@@ -277,10 +280,6 @@
                 if (!check) {
                     $A.noticeWarning(this.$L('最多只能上传 ' + this.maxNum + ' 张图片。'));
                 }
-                this.params = {
-                    width: this.width,
-                    height: this.height
-                };
                 return check;
             },
             handleClick() {

resources/assets/js/pages/manage/setting/personal.vue

@@ -2,7 +2,7 @@
     <div class="setting-item submit">
         <Form ref="formData" :model="formData" :rules="ruleData" label-width="auto" @submit.native.prevent>
             <FormItem :label="$L('头像')" prop="userimg">
-                <ImgUpload v-model="formData.userimg" :num="1"></ImgUpload>
+                <ImgUpload v-model="formData.userimg" :num="1" :width="512" :height="512" :whcut="1"></ImgUpload>
                 <span class="form-tip">{{$L('建议尺寸：200x200')}}</span>
             </FormItem>
             <FormItem :label="$L('邮箱')">

resources/assets/sass/components/user-avatar.scss

@@ -19,6 +19,11 @@
                 font-size: 15px;
                 line-height: inherit;
             }
+            .el-avatar {
+                > img {
+                    margin: 0 auto;
+                }
+            }
             > em {
                 position: absolute;
                 right: 0;