图片裁剪

src/views/recruit/enterprise/informationSetting/index.vue

@@ -20,6 +20,9 @@
     </CtForm>
     <v-btn class="buttons mt-5" color="primary" @click.stop="handleSubmit">{{ $t('common.save') }}</v-btn>
   </v-card>
+
+  <Loading :visible="overlay"></Loading>
+  <ImgCropper :visible="isShowCopper" :image="selectPic" :cropBoxResizable="true" @close="handleHideCopper" :aspectRatio="1 / 1"></ImgCropper>
 </template>
 
 <script setup>
@@ -36,6 +39,12 @@ import { getUserAvatar } from '@/utils/avatar'
 const { t } = useI18n()
 const userStore = useUserStore()
 const showIcon = ref(false)
+
+// 图片裁剪
+const overlay = ref(false)
+const selectPic = ref('')
+const isShowCopper = ref(false)
+
 const CtFormRef = ref()
 const formItems = ref({
   options: [
@@ -111,23 +120,44 @@ const openFileInput = () => {
 // 上传头像
 const handleUploadFile = async (e) => {
   const file = e.target.files[0]
-  const formData = new FormData()
-  formData.append('file', file)
-  const { data } = await uploadFile(formData)
-  if (!data) return
-  formItems.value.options.find(e => e.key === 'avatar').value = data
+  if (!file) return
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = () => {
+    selectPic.value = String(reader.result)
+    isShowCopper.value = true
+  }
+}
+
+const handleHideCopper = (data) => {
+  isShowCopper.value = false
+  if (data) {
+    const { file } = data
+    if (!file) return
+
+    const formData = new FormData()
+    formData.append('file', file)
+    uploadFile(formData).then(async ({ data }) => {
+      if (!data) return
+      formItems.value.options.find(e => e.key === 'avatar').value = data
+    })
+  }
 }
 
 // 提交
 const handleSubmit = async () => {
   const { valid } = await CtFormRef.value.formRef.validate()
   if (!valid) return
+  overlay.value = true
   formItems.value.options.forEach(item => {
     query.value[item.key] = item.value
   })
   await saveUserInfo(query.value)
-  Snackbar.success(t('common.submittedSuccessfully'))
-  await userStore.getEnterpriseInfo()
+  setTimeout(async () => {
+    await userStore.getEnterpriseInfo()
+    Snackbar.success(t('common.submittedSuccessfully'))
+    overlay.value = false
+  }, 1000)
 }
 </script>