perf: 优化图片上传

app/Http/Controllers/Api/SystemController.php

@@ -892,10 +892,10 @@ class SystemController extends AbstractController
      * @apiParam {String} filename          post-文件名
      * @apiParam {Number} [width]           压缩图片宽（默认0）
      * @apiParam {Number} [height]          压缩图片高（默认0）
-     * @apiParam {String} [whcut]           压缩方式
+     * @apiParam {String} [whcut]           压缩方式（等比缩放）
-     * - 1：裁切（默认，宽、高非0有效）
+     * - cover：完全覆盖容器，可能图片部分不可见（width、height必须大于0）
-     * - 0：缩放
+     * - contain：完全装入容器，可能容器部分显示空白（width、height必须大于0）
-     * - -1或'auto'：保持等比裁切
+     * - percentage：完全装入容器，可能容器有一边尺寸不足（默认，假如：width=200、height=0，则宽度最大不超过200、高度自动）
      *
      * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
      * @apiSuccess {String} msg     返回信息（错误描述）
@@ -908,11 +908,15 @@ class SystemController extends AbstractController
         }
         $width = intval(Request::input('width'));
         $height = intval(Request::input('height'));
-        $whcut = intval(Request::input('whcut', 1));
+        $whcut = Request::input('whcut');
-        $scale = [2160, 4160, -1];
+        $whcut = match (strval($whcut)) {
-        if ($width > 0 || $height > 0) {
+            '1' => 'cover',
-            $scale = [$width, $height, $whcut];
+            '0' => 'contain',
-        }
+            'cover',
+            'contain' => $whcut,
+            default => 'percentage',
+        };
+        $scale = [$width ?: 2160, $height ?: 4160, $whcut];
         $path = "uploads/user/picture/" . User::userid() . "/" . date("Ym") . "/";
         $image64 = trim(Request::input('image64'));
         $fileName = trim(Request::input('filename'));

app/Module/Base.php

@@ -2027,7 +2027,7 @@ class Base
                     if ($width > 0 || $height > 0) {
                         $scaleName = "_{WIDTH}x{HEIGHT}";
                         if (isset($param['scale'][2])) {
-                            $scaleName .= "_c{$param['scale'][2]}";
+                            $scaleName .= "_{$param['scale'][2]}";
                         }
                     }
                 }
@@ -2065,7 +2065,7 @@ class Base
                     $data = match ($exif['Orientation']) {
                         2 => imageflip($data, IMG_FLIP_HORIZONTAL),
                         3 => imagerotate($data, 180, 0),
-                        4 => imageflip($data, IMG_FLIP_VERTICAL), 
+                        4 => imageflip($data, IMG_FLIP_VERTICAL),
                         5 => imageflip(imagerotate($data, -90, 0), IMG_FLIP_HORIZONTAL),
                         6 => imagerotate($data, -90, 0),
                         7 => imageflip(imagerotate($data, 90, 0), IMG_FLIP_HORIZONTAL),

resources/assets/js/components/ImgUpload.vue

@@ -29,7 +29,7 @@
                             :headers="uploadHeaders"
                             :data="uploadParams"
                             :show-upload-list="false"
-                            :max-size="maxSize"
+                            :max-size="maxImageSize"
                             :format="['jpg', 'jpeg', 'webp', 'gif', 'png']"
                             :default-file-list="defaultList"
                             :on-progress="handleProgress"
@@ -77,8 +77,6 @@
 </template>
 
 <script>
-import {languageList} from "../language";
-
 export default {
     name: 'ImgUpload',
     props: {
@@ -101,6 +99,10 @@ export default {
         uploadIng: {
             type: Number,
             default: 0
+        },
+        maxSize: {
+            type: Number,
+            default: 1024 * 10 // 10M
         }
     },
     data() {
@@ -118,7 +120,7 @@ export default {
             maxNum: Math.min(Math.max($A.runNum(this.num), 1), 99),
             httpValue: '',
             httpType: '',
-            maxSize: 2048
+            maxImageSize: this.maxSize
         }
     },
     mounted() {
@@ -311,7 +313,7 @@ export default {
             //上传大小错误
             $A.noticeWarning({
                 title: this.$L('超出文件大小限制'),
-                desc: this.$L('文件 ' + file.name + ' 太大，不能超过：' + $A.bytesToSize(this.maxSize * 1024))
+                desc: this.$L('文件 ' + file.name + ' 太大，不能超过：' + $A.bytesToSize(this.maxImageSize * 1024))
             });
         },
         handleBeforeUpload() {

resources/assets/js/components/TEditor.vue

@@ -18,7 +18,10 @@
                 type="callback"
                 :uploadIng.sync="uploadIng"
                 @on-callback="editorImage"
-                num="50"/>
+                :num="50"
+                :width="2048"
+                :height="2048"
+                whcut="percentage"/>
             <Upload
                 name="files"
                 ref="fileUpload"

resources/assets/js/components/VMEditor/engine/editor.vue

@@ -22,7 +22,10 @@
             type="callback"
             :uploadIng.sync="uploadIng"
             @on-callback="handleInsertImages"
-            num="50"/>
+            :num="50"
+            :width="2048"
+            :height="2048"
+            whcut="percentage"/>
         <Upload
             name="files"
             ref="fileUpload"

resources/assets/js/pages/manage.vue

@@ -256,7 +256,7 @@
             :mask-closable="false">
             <Form :model="createGroupData" v-bind="formOptions"  @submit.native.prevent>
                 <FormItem prop="avatar" :label="$L('群头像')">
-                    <ImgUpload v-model="createGroupData.avatar" :num="1" :width="512" :height="512" :whcut="1"/>
+                    <ImgUpload v-model="createGroupData.avatar" :num="1" :width="512" :height="512" whcut="cover"/>
                 </FormItem>
                 <FormItem prop="userids" :label="$L('群成员')">
                     <UserSelect v-model="createGroupData.userids" :uncancelable="createGroupData.uncancelable" :multiple-max="100" show-bot :title="$L('选择项目成员')"/>

resources/assets/js/pages/manage/approve/details.vue

@@ -201,7 +201,7 @@
                     <Input type="textarea" v-model="commentData.content"></Input>
                 </FormItem>
                 <FormItem prop="pictures" :label="$L('图片')">
-                    <ImgUpload v-model="commentData.pictures" :num="3" :width="2000" :height="2000" :whcut="0"></ImgUpload>
+                    <ImgUpload v-model="commentData.pictures" :num="3" :width="2048" :height="2048" whcut="percentage"/>
                 </FormItem>
             </Form>
             <div slot="footer" class="adaption">

resources/assets/js/pages/manage/approve/index.vue

@@ -228,7 +228,7 @@
                     <Input type="textarea" v-model="addData.description"></Input>
                 </FormItem>
                 <FormItem prop="other" :label="$L('图片')">
-                    <ImgUpload v-model="addData.other" :num="3" :width="2000" :height="2000" :whcut="0"></ImgUpload>
+                    <ImgUpload v-model="addData.other" :num="3" :width="2048" :height="2048" whcut="percentage"/>
                 </FormItem>
             </Form>
             <div slot="footer" class="adaption">

resources/assets/js/pages/manage/components/DialogComplaint.vue

@@ -20,7 +20,7 @@
                     :placeholder="$L('请输入填写详细的举报原因，以使我们更好的帮助你解决问题')" />
             </div>
             <div class="group-complaint-img">
-                <ImgUpload v-model="imgs" :num="5" :width="512" :height="512" :whcut="1"></ImgUpload>
+                <ImgUpload v-model="imgs" :num="5" :width="2048" :height="2048" whcut="percentage"/>
             </div>
         </div>
         <!--  -->

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -407,7 +407,7 @@
             <Form :model="modifyData" v-bind="formOptions" @submit.native.prevent>
                 <Alert v-if="modifyData.system_name" type="error" style="margin-bottom:18px">{{$L(`正在修改系统机器人：${modifyData.system_name}`)}}</Alert>
                 <FormItem prop="avatar" :label="$L('头像')">
-                    <ImgUpload v-model="modifyData.avatar" :num="1" :width="512" :height="512" :whcut="1"/>
+                    <ImgUpload v-model="modifyData.avatar" :num="1" :width="512" :height="512" whcut="cover"/>
                 </FormItem>
                 <FormItem v-if="typeof modifyData.name !== 'undefined'" prop="name" :label="$L('名称')">
                     <Input v-model="modifyData.name" :maxlength="20" />

resources/assets/js/pages/manage/components/TeamManagement.vue

@@ -263,7 +263,7 @@
                 </Row>
                 <Row class="team-department-checkin-item">
                     <Col span="24">
-                        <ImgUpload v-model="checkinFaceEditData.faceimg" :num="1" :width="512" :height="512" :whcut="1"></ImgUpload>
+                        <ImgUpload v-model="checkinFaceEditData.faceimg" :num="1" :width="512" :height="512" whcut="cover"/>
                         <div class="form-tip">{{$L('建议尺寸：500x500')}}</div>
                     </Col>
                 </Row>

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

@@ -26,7 +26,7 @@
                         </Row>
                         <Row class="setting-template">
                             <Col span="24">
-                                <ImgUpload v-model="faceimgs" :num="1" :width="512" :height="512" :whcut="1"></ImgUpload>
+                                <ImgUpload v-model="faceimgs" :num="1" :width="512" :height="512" whcut="cover"/>
                                 <div class="form-tip">{{ $L('建议尺寸：500x500') }}</div>
                             </Col>
                         </Row>

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

@@ -7,7 +7,7 @@
             v-bind="formOptions"
             @submit.native.prevent>
             <FormItem :label="$L('头像')" prop="userimg">
-                <ImgUpload v-model="formData.userimg" :num="1" :width="512" :height="512" :whcut="1"></ImgUpload>
+                <ImgUpload v-model="formData.userimg" :num="1" :width="512" :height="512" whcut="cover"/>
                 <span class="form-tip">{{$L('建议尺寸：200x200')}}</span>
             </FormItem>
             <FormItem :label="$L('邮箱')" prop="email">