up

frontent/ops_vue_js/src/components/imageCropper.vue

@@ -20,7 +20,7 @@ reader.onload = () => {
   initCropper(reader.result);
 };
 
-const emit = defineEmits(['crop'])
+const emit = defineEmits(['crop_to_canvas'])
 
 onMounted(() => {
   cro_sele.value.$change(0, 0, cor_size_width, cor_size_height);
@@ -72,11 +72,11 @@ function openFilePicker() {
 }
 
 function getsele() {
-  const canvas = cro_canv.value.$toCanvas().then((a) => {
+  cro_canv.value.$toCanvas().then((a) => {
     //console.log(a);
-    const imageData = a.toDataURL("image/png");
+    //const imageData = a.toDataURL("image/png");
 
-    emit('crop',imageData)
+    emit('crop_to_canvas',a)
     //console.log(imageData);
   });
 }

frontent/ops_vue_js/src/my_network_func.js

@@ -2,7 +2,6 @@ import axios from "axios";
 import { myfuncs } from "./myfunc";
 import { useUserStore } from "@/stores/user";
 
-
 var head_path = "/api";
 
 export const my_network_func = {
@@ -22,20 +21,60 @@ export const my_network_func = {
         callback(re_data);
       });
   },
-  postflise(path,flise,json,callback){
+  postflise(path, file, callback) {
+    //拿去用户数据
+    var userstore = useUserStore();
 
+    // 1. 创建 FormData 对象
+    const formData = new FormData();
+
+    // 2. 添加文件
+    formData.append("cookie", userstore.userCookie.Value); //把cookie插入json
+    formData.append("file", file); // 单个文件
+    //console.log(file)
+    
+    
+
+    var re_data = {};
+
+    axios
+      .post(head_path + path, formData)
+      .then((response) => {
+        //console.log(response)
+        re_data["statusCode"] = response.status;
+        //载入服务器返回的数据
+        if (response.data) {
+          re_data["data"] = response.data;
+          //自动保存服务器发送的cookie
+          if (response.status == 200) {
+            if (response.data.err_code == 0) {
+            } else if (response.data.err_code == -44) {
+              //后端返回的cookie错误码
+              //userCookieExpired
+              userstore.logout();
+            }
+          }
+         
+        }
+        callback(re_data);
+      })
+      .catch((error) => {
+        re_data["statusCode"] = -1;
+        re_data["error"] = error;
+        callback(re_data);
+      });
   },
   postJson(path, json, callback) {
     //把cookie插入json
     var data = {};
     data["data"] = json;
 
-    var userstore=useUserStore()
+    var userstore = useUserStore();
 
     //console.log(userstore.cookieValue)
-   
+
     if (userstore.userCookie) {
-      data["userCookieValue"] = userstore.userCookie.Value
+      data["userCookieValue"] = userstore.userCookie.Value;
     }
 
     var re_data = {};
@@ -53,18 +92,15 @@ export const my_network_func = {
         if (response.data) {
           re_data["data"] = response.data;
           //自动保存服务器发送的cookie
-          if(response.status==200)
-          {
-            
-            if(response.data.err_code==0){
+          if (response.status == 200) {
+            if (response.data.err_code == 0) {
               // if(response.data.return.cookie){
-                
               //   userstore.cookieUpdata(response.data.return.cookie)
               // }
-
-            }else if(response.data.err_code==-44){//后端返回的cookie错误码
+            } else if (response.data.err_code == -44) {
+              //后端返回的cookie错误码
               //userCookieExpired
-              userstore.logout()
+              userstore.logout();
             }
           }
           // if (response.data.cookie) {

frontent/ops_vue_js/src/views/settings/account.vue

@@ -23,6 +23,22 @@ const userStore = useUserStore();
 
 const is_avatar_change = ref(false);
 const avatar_temp_url = ref("");
+const avatar_canvas=ref();
+
+// 将 Base64 转换为 File 对象
+function base64ToFile(base64Data, filename) {
+  const arr = base64Data.split(',');
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1] || base64Data);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  
+  return new File([u8arr], filename, { type: mime });
+}
 
 function updataInfo() {
 
@@ -57,9 +73,30 @@ function updataInfo() {
   }
 
   //检查头像是否需要更新
-  if(is_avatar_change)
+  if(is_avatar_change.value)
   {
-    
+    my_network_func.postflise("/users/updateAvatar",base64ToFile(avatar_temp_url.value,"avatar.png"),(r)=>{
+      is_avatar_change.value=false
+      //console.log(r)
+       switch (r.statusCode) {
+        case 200:
+          switch (r.data.err_code) {
+            case 0:
+              //mos.value?.showAlert("success", t("message.save_ok"), 1000);
+              is_avatar_change.value=false
+              // 更新用户信息到store
+              //userStore.getUserInfoFromCookie();
+              break;
+            default:
+              mos.value?.showAlert("danger", t("message.server_error"), 5000);
+              break;
+          }
+          break;
+        default:
+          mos.value?.showAlert("danger", t("message.network_err"), 5000);
+          break;
+      }
+    })
   }
 
   my_network_func.postJson(
@@ -92,9 +129,11 @@ function updataInfo() {
   );
 }
 
-function rev_avatar_url(url) {
+function rev_avatar_canvas(canvas) {
+
   is_avatar_change.value = true;
-  avatar_temp_url.value = url;
+  avatar_temp_url.value = canvas.toDataURL("image/png");
+  avatar_canvas.value=canvas
   //console.log(url)
 }
 
@@ -156,7 +195,7 @@ onMounted(() => {
                   </div>
                   <!-- <imageCropper /> -->
                   <div class="col-auto " >
-                    <imageCropper @crop="rev_avatar_url"></imageCropper>
+                    <imageCropper @crop_to_canvas="rev_avatar_canvas"></imageCropper>
                     
                     <button v-show="is_avatar_change" class="btn btn-outline-secondary " @click="cancel_change_avatar">
                       {{ t("settings.cancel") }}