fix:修改头像上传;

2024-07-30 16:02:01 +08:00 · 2024-07-30 16:02:01 +08:00 · 1e79807a4b
parent 817ea8790e
commit 1e79807a4b
7 changed files with 303 additions and 159 deletions
--- a/package.json
+++ b/package.json
@ -21,10 +21,11 @@
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.1",
    "@electron-toolkit/utils": "^3.0.0",
-    "@element-plus/icons-vue": "^2.3.1",
    "@electron/remote": "^2.1.2",
+    "@element-plus/icons-vue": "^2.3.1",
    "@vitejs/plugin-vue-jsx": "^4.0.0",
    "@vueuse/core": "^10.11.0",
+    "cropperjs": "^1.6.2",
    "crypto-js": "^4.2.0",
    "electron-dl-manager": "^3.0.0",
    "electron-log": "^5.1.7",
@ -34,12 +35,11 @@
    "js-cookie": "^3.0.5",
    "jsencrypt": "^3.3.2",
    "jsondiffpatch": "0.6.0",
-    "pdfjs-dist": "4.4.168",
    "lodash": "^4.17.21",
+    "pdfjs-dist": "4.4.168",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
    "spark-md5": "^3.0.2",
-    "vue-cropper": "^1.1.4",
    "vue-router": "^4.4.0",
    "xlsx": "^0.18.5"
  },
--- a/src/renderer/src/views/classManage/aside.vue
+++ b/src/renderer/src/views/classManage/aside.vue
@ -19,7 +19,7 @@
 </template>

 <script setup>
-import {ref,defineProps,defineEmits,onMounted} from "vue";
+import {ref,defineProps,defineEmits} from "vue";
 const activeIndex = ref('0')
 const props = defineProps({
  classList:{
@ -43,9 +43,7 @@ const handleSelect = (itemDom,pathKey) => {
  // })
  emits('handleSelect',{index,id})
 }
-onMounted(() => {
-  console.log(props.classList,'props.classList')
-})
+
 </script>

 <style scoped>
--- a/src/renderer/src/views/classManage/classInfo.vue
+++ b/src/renderer/src/views/classManage/classInfo.vue
@ -36,7 +36,6 @@
  })
  const isDelClass = delClassDemo()
  const userStore = useUserStore().user
-  console.log(userStore,'userStore')
  //删除教室
  const deleteClassRoom = () => {
    ElMessageBox.alert('确认删除该班级？', {
@ -64,7 +63,6 @@
          classInfo.student = res.rows.filter(item => item.inrole === 'student')
        })
      })
-      console.log(classInfo,'classInfo')
    }
  }
  onMounted(() => {
--- a/src/renderer/src/views/classManage/index.vue
+++ b/src/renderer/src/views/classManage/index.vue
@ -152,7 +152,6 @@
      //   }
      // })
      classList.value = [...response.rows]
-      console.log(classList.value,'classList')
      if(classList.value.length > 0){
        classId.value = classList.value[0].id
        currentIndex.value = 0
--- a/src/renderer/src/views/classManage/studentList.vue
+++ b/src/renderer/src/views/classManage/studentList.vue
@ -162,7 +162,7 @@
    ],
    birthday: [
      { required: true, message: '请选择出生日期', trigger: 'blur' }
-    ]
+    ],
  })

  // 获取班级学生信息
@ -225,6 +225,10 @@
      studentForm.id = 0
      studentForm.entpid = 0
      studentForm.name = ''
+      studentForm.address = ''
+      studentForm.birthday = ''
+      studentForm.parentname = ''
+      studentForm.parentmobile = ''
      studentVisible.value = true
    }else{
      getStudentmain(id).then((response) => {
@ -249,7 +253,7 @@
        confirmButtonText: '确认',
        type: 'warning',
      }).then(() => {
-        leaveClass({ classid: props.classId, studentid: studentForm.id, inrole: 'student' }).then((response) => {
+        leaveClass({ classid: props.classId, studentid: studentForm.id, inrole: 'student' }).then(() => {
          ElMessage({
            type: 'info',
            message: '移出成功',
--- a/src/renderer/src/views/profile/cropperImage.vue
+++ b/src/renderer/src/views/profile/cropperImage.vue
@ -0,0 +1,266 @@
+<!-- 裁剪头像弹窗 -->
+<template>
+  <div class="personal-authentica">
+    <div class="context">
+      <div class="text-box" v-loading="upLoading">
+        <!-- 关闭按钮 -->
+        <!-- 内容 -->
+        <div id="Box">
+          <h3>头像设置</h3>
+
+          <!-- 裁剪+效果 -->
+          <div class="box">
+            <div class="box_1">
+              <img :src="filePath" ref="image" />
+            </div>
+
+            <!--裁剪完的图片-->
+            <div class="box_2">
+              <div class="before"></div>
+            </div>
+          </div>
+
+          <!--  裁剪按钮-->
+          <div class="btn">
+            <el-button style="margin-right: 20px">选择</el-button>
+            <input
+              class="upload"
+              type="file"
+              accept=".png, .jpg, .jpeg"
+              @change="uploadImg"
+            />
+
+            <el-button @click="cancle">取消</el-button>
+            <el-button @click="sureSava">提交</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, toRefs, ref } from "vue";
+//引入依赖
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import { ElMessage } from "element-plus";
+
+export default {
+  props: {
+    filePath: {
+      type: String,
+    },
+    aspectRatio: { // 裁剪比例，需要可传
+      type: Number,
+      default: 1,
+    },
+    userId: {
+      type: String,
+    },
+  },
+  setup(props, context) {
+
+    // 原生上传的文件
+    const uploadImg = (e) => {
+      if (e.target.files && e.target.files[0]) {
+        const file = e.target.files[0];
+        dataFile.image.src = URL.createObjectURL(file);
+        if (dataFile.myCropper) {
+          dataFile.myCropper.destroy();
+        }
+        copper();
+      }
+    };
+
+    const dataFile = reactive({
+      // 裁剪后的图片
+      afterImg: "",
+      // 裁剪的图片
+      image: null,
+      // 进行裁剪
+      myCropper: null,
+    });
+
+    // 实例化裁剪框
+    const copper = () => {
+      dataFile.myCropper = new Cropper(dataFile.image, {
+        /*
+        * viewMode 视图控制
+          - 0 无限制
+          - 1 限制裁剪框不能超出图片的范围
+          - 2 限制裁剪框不能超出图片的范围 且图片填充模式为 cover 最长边填充
+          - 3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充
+        * */
+        viewMode: 1,
+        // 设置图片是否可以拖拽功能
+        /*
+        * dragMode 拖拽图片模式
+          - crop 形成新的裁剪框
+          - move 图片可移动
+          - none 什么也没有
+        * */
+        dragMode: "move",
+        // 是否显示图片后面的网格背景,一般默认为true
+        background: true,
+        // 进行图片预览的效果
+        preview: ".before",
+        // 设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域
+        autoCropArea: 0.8,
+        // 设置图片是否可以进行收缩功能
+        zoomOnWheel: true,
+        // 是否显示 + 箭头
+        center: true,
+        // 设置裁剪框为固定的宽高比
+        aspectRatio: props.aspectRatio,
+      });
+    };
+
+    // 裁剪后
+    const sureSava = () => {
+      if (dataFile.myCropper) {
+        // 拿到裁剪后的图片
+        dataFile.afterImg = dataFile.myCropper
+          .getCroppedCanvas({
+            imageSmoothingQuality: "high",
+          })
+          .toDataURL("image/jpeg"); // 设置图片格式
+        context.emit("sureSava",convertDataUrlToBlob(dataFile.afterImg))
+      } else {
+        ElMessage({
+          message: "请先选择图片",
+          type: "warning",
+        });
+      }
+    };
+
+    // 获取上传文件签名
+    const upLoading = ref(false);
+    const convertDataUrlToBlob = (dataUrl) => {
+      const parts = dataUrl.split(';base64,');
+      const contentType = parts[0].split(':')[1];
+      const byteCharacters = atob(parts[1]);
+      const byteArrays = [];
+
+      for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+        const slice = byteCharacters.slice(offset, offset + 512);
+
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+          byteNumbers[i] = slice.charCodeAt(i);
+        }
+
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+      }
+
+      return new Blob(byteArrays, { type: contentType });
+    };
+    const cancle = () => {
+      context.emit("cancle");
+    }
+
+    // 页面刷新自动执行
+    onMounted(() => {
+      if (props.filePath) {
+        dataFile.image.src = props.filePath;
+        copper();
+      }
+    });
+
+    return {
+      ...toRefs(dataFile),
+      sureSava,
+      // boxClose,
+      uploadImg,
+      upLoading,
+      cancle,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#Box {
+  padding: 20px;
+  margin-top: 20px;
+  border-radius: 5px;
+  height: 100%;
+  > h3 {
+  }
+  > .box {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    > div {
+      width: 400px;
+      height: 200px;
+      > img {
+        display: block;
+      }
+    }
+    > .box_2 {
+      > .before {
+        width: 200px;
+        height: 200px;
+        position: relative;
+        left: 150px;
+        overflow: hidden;
+        border-radius: 50%;
+      }
+    }
+  }
+  > .btn {
+    position: relative;
+    display: flex;
+    > .upload {
+      display: block;
+      width: 60px;
+      height: 32px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+    }
+    margin-top: 30px;
+  }
+}
+.personal-authentica {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 400;
+  font-size: 12px;
+  color: #ccc;
+  > .context {
+    position: absolute;
+    z-index: 400;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, -50%);
+    > .text-box {
+      position: relative;
+      // margin: 120px auto 0;
+      width: 720px;
+      height: 350px;
+      background-color: #fff;
+      > i {
+        position: absolute;
+        color: #aaa;
+        right: 20px;
+        top: 8px;
+        font-size: 35px;
+        cursor: pointer;
+      }
+    }
+  }
+  > .mark {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(43, 43, 43, 0.7215686275);
+  }
+}
+</style>
--- a/src/renderer/src/views/profile/userAvatar.vue
+++ b/src/renderer/src/views/profile/userAvatar.vue
@ -2,112 +2,45 @@
  <div class="user-info-head" @click="editCropper()">
    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
    <el-dialog
-      :title="title"
      v-model="open"
-      width="800px"
      append-to-body
      @opened="modalOpened"
      @close="closeDialog"
    >
-      <el-row>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
-          <vue-cropper
+      <CropperImage
        ref="cropper"
-            :img="options.img"
-            :info="true"
-            :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
-            :fixedBox="options.fixedBox"
-            :outputType="options.outputType"
-            @realTime="realTime"
-            v-if="visible"
-          />
-        </el-col>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
-          <div class="avatar-upload-preview">
-            <div v-show="show" class="large" :style="[{backgroundImage:`url(${options.img})`},largePosition]"></div>
-          </div>
-        </el-col>
-      </el-row>
-      <br />
-      <el-row>
-        <el-col :lg="2" :md="2">
-          <el-upload
-            action="#"
-            :http-request="requestUpload"
-            :show-file-list="false"
-            :before-upload="beforeUpload"
-          >
-            <el-button>
-              选择
-              <el-icon class="el-icon--right"><Upload /></el-icon>
-            </el-button>
-          </el-upload>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
-          <el-button :icon="Plus" @click="changeScale(1)"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button :icon="Minus" @click="changeScale(-1)"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button :icon="RefreshLeft" @click="rotateLeft()"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button :icon="RefreshRight" @click="rotateRight()"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
-          <el-button type="primary" @click="uploadImg()">提 交</el-button>
-        </el-col>
-      </el-row>
+        :filePath="options.img"
+        @sureSava="uploadImg"
+        @cancle="cancle"
+      ></CropperImage>
    </el-dialog>
  </div>
 </template>

  <script setup>
-import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
-import {ref, reactive, getCurrentInstance, watch} from 'vue'
-import 'vue-cropper/dist/index.css'
-import { VueCropper } from 'vue-cropper'
+import {ref, reactive} from 'vue'
 import { uploadAvatar } from '@/api/system/user'
 import useUserStore from '@/store/modules/user'
 import { ElMessage } from 'element-plus'
-import { useMouseInElement } from '@vueuse/core'
+import CropperImage from './cropperImage.vue'

 const userStore = useUserStore()
-const { proxy } = getCurrentInstance()

 const open = ref(false)
 const visible = ref(false)
-const title = ref('修改头像')

 //图片裁剪数据
 const options = reactive({
  img: userStore.user.avatar, // 裁剪图片的地址
  autoCrop: true, // 是否默认生成截图框
-  autoCropWidth: 200, // 默认生成截图框宽度
-  autoCropHeight: 200, // 默认生成截图框高度
+  autoCropWidth: 400, // 默认生成截图框宽度
+  autoCropHeight: 400, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
  outputType: 'png', // 默认生成截图为PNG格式
  previews: {} //预览数据
 })
-// 是否显示遮罩和大图
-const show = ref(false)
-// 遮罩的坐标(样式)
-const layerPosition = reactive({
-  left: 0,
-  top: 0
-})
-// 大图背景定位(样式)
-const largePosition = reactive({
-  backgroundPositionX: 0,
-  backgroundPositionY: 0
-})
+
 const cropper = ref(null)
-const { elementX, elementY } = useMouseInElement(cropper)
-//监听是否拖动
-const transform = ref({})

 /** 编辑头像 */
 function editCropper() {
@ -117,39 +50,8 @@ function editCropper() {
 function modalOpened() {
  visible.value = true
 }
-/** 覆盖默认上传行为 */
-function requestUpload() {}
-/** 向左旋转 */
-function rotateLeft() {
-  proxy.$refs.cropper.rotateLeft()
-}
-/** 向右旋转 */
-function rotateRight() {
-  proxy.$refs.cropper.rotateRight()
-}
-/** 图片缩放 */
-function changeScale(num) {
-  num = num || 1
-  proxy.$refs.cropper.changeScale(num)
-}
-/** 上传预处理 */
-function beforeUpload(file) {
-  if (file.type.indexOf('image/') == -1) {
-    ElMessage({
-      message: '文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。',
-      type: 'error',
-    })
-  } else {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => {
-      options.img = reader.result
-    }
-  }
-}
 /** 上传图片 */
-function uploadImg() {
-  proxy.$refs.cropper.getCropBlob((data) => {
+function uploadImg(data) {
  let formData = new FormData()
  formData.append('avatarfile', data)
  uploadAvatar(formData).then((response) => {
@ -162,39 +64,16 @@ function uploadImg() {
    })
    visible.value = false
  })
-  })
-}
-
-/** 实时预览 */
-function realTime(data) {
-  options.previews = data
-  transform.value = Object.assign({}, data.img)
 }

 /** 关闭窗口 */
 function closeDialog() {
-  options.img = userStore.avatar
+  // options.img = userStore.avatar
  options.visible = false
 }
-watch(transform, () => {
-  // 根据得到数据设置样式数据和是否显示数据
-  show.value = true
-  // 计算坐标
-  const position = { x: 0, y: 0 }
-
-  if (elementX.value < 100) position.x = 0
-  else if (elementX.value > 300) position.x = 200
-  else position.x = elementX.value - 100
-
-  if (elementY.value < 100) position.y = 0
-  else if (elementY.value > 300) position.y = 200
-  else position.y = elementY.value - 100
-  // 给样式赋值
-  layerPosition.left = position.x + 'px'
-  layerPosition.top = position.y + 'px'
-  largePosition.backgroundPositionX = -2 * position.x + 'px'
-  largePosition.backgroundPositionY = -2 * position.y + 'px'
-},{deep:true})
+const cancle = () => {
+  open.value = false
+}
 </script>

  <style lang='scss' scoped>