优化裁剪上传

src/components/Cropper/src/CropperModal.vue

@@ -17,7 +17,7 @@
             <el-upload
               :show-file-list="false"
               accept="image/*"
-             :http-request="handleHttpUpload"
+              :http-request="handleHttpUpload"
               :before-upload="beforeUpload"
               style="width: auto"
             >
@@ -160,7 +160,7 @@
   import { ElMessage } from 'element-plus';
   import { basicModal, useModal } from '@/components/Modal';
   import CropperImage from './CropperImage.vue';
-  import { dataURLtoBlob ,base64ToFile} from '@/utils/file/base64Conver';
+  import { dataURLtoBlob, base64ToFile } from '@/utils/file/base64Conver';
   import { isFunction } from '@/utils/is';
   import { getOssConfig } from '@/api/common';
   import OSS from 'ali-oss';
@@ -207,17 +207,26 @@
       let scaleX = 1;
       let scaleY = 1;
 
+      /**
+       * 定义模态
+       */
       const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
         title: props.title,
         width: 800,
       });
 
+      /**
+       * 显示弹窗
+       */
       function showModal() {
         openModal();
       }
-      function handleHttpUpload(){
-      }
-      // 上传图片
+      function handleHttpUpload() {}
+
+      /**
+       * 上传图片
+       * @param file 文件
+       */
       function beforeUpload(file) {
         const reader = new FileReader();
         reader.readAsDataURL(file);
@@ -248,21 +257,25 @@
         cropper?.value?.[event]?.(arg);
       }
 
+      /**
+       * 执行上传
+       */
       async function handleOk() {
         if (!src.value) {
           setSubLoading(false);
           return ElMessage.error('请先上传图片');
         }
         const uploadApi = props.uploadApi;
-        const name = props.name
-        const file = base64ToFile(previewSource.value,filename);
-        //接口上传
+        const name = props.name;
+        const file = base64ToFile(previewSource.value, filename);
+        // 文件上传
         if (uploadApi && isFunction(uploadApi)) {
+          // 本地接口上传
           try {
             setSubLoading(true);
-            const formData = new FormData()
-            formData.append('file',file)
-            formData.append('name',name)
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('name', name);
             const result = await uploadApi(formData);
             emit('uploadSuccess', result);
             closeModal();
@@ -270,10 +283,15 @@
             setSubLoading(false);
           }
         } else {
-          //oss上传
-          actionFiles(file)
+          // OSS上传
+          actionFiles(file);
         }
       }
+
+      /**
+       * 上传阿里云OSS
+       * @param fileChild 参数
+       */
       const actionFiles = async (fileChild) => {
         const configData = await getOssConfig();
         let date = new Date();
@@ -321,17 +339,21 @@
             // headers,
             mime: fileChild.type,
           });
-          emit('uploadSuccess', {fileUrl:configData.oss_domain + res.name});
-            closeModal();
+          emit('uploadSuccess', { fileUrl: configData.oss_domain + res.name });
+          closeModal();
         } catch (error) {
           emit('uploadSuccess', {});
         } finally {
           setSubLoading(false);
         }
       };
-      function handleClose(){
-        src.value =''
-        previewSource.value=''
+
+      /**
+       * 执行关闭
+       */
+      function handleClose() {
+        src.value = '';
+        previewSource.value = '';
       }
 
       return {
@@ -346,7 +368,7 @@
         handleReady,
         handlerToolbar,
         handleOk,
-        handleClose
+        handleClose,
       };
     },
   });

src/views/system/user/edit.vue

@@ -157,7 +157,8 @@
           class="flex-1"
           :rules="[
             { required: true, message: '请输入手机号码', trigger: 'blur' },
-            { validator: rule.validatePhone, trigger: 'blur' }]"
+            { validator: rule.validatePhone, trigger: 'blur' },
+          ]"
         >
           <el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable />
         </el-form-item>