fix: 🐛 头像上传，文件上传问题

web/src/views/system/login/component/account.vue

@@ -89,8 +89,8 @@ export default defineComponent({
 		const state = reactive({
 			isShowPassword: false,
 			ruleForm: {
-				username: 'superadmin',
-				password: 'admin123456',
+				username: '',
+				password: '',
 				captcha: '',
 				captchaKey: '',
 				captchaImgBase: '',

web/src/views/system/personal/api.ts

@@ -1,40 +1,38 @@
 import { request } from '/@/utils/service';
 import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
-import {apiPrefix} from "/@/views/system/messageCenter/api";
+import { apiPrefix } from '/@/views/system/messageCenter/api';
 export function GetUserInfo(query: PageQuery) {
-    return request({
-        url: '/api/system/user/user_info/',
-        method: 'get',
-        params: query
-    });
+	return request({
+		url: '/api/system/user/user_info/',
+		method: 'get',
+		params: query,
+	});
 }
 
-
 /**
  * 更新用户信息
  * @param data
  */
 export function updateUserInfo(data: AddReq) {
-    return request({
-        url: '/api/system/user/update_user_info/',
-        method: 'put',
-        data: data
-    })
+	return request({
+		url: '/api/system/user/update_user_info/',
+		method: 'put',
+		data: data,
+	});
 }
 
-
 /**
  * 获取自己接收的消息
  * @param query
  * @returns {*}
  * @constructor
  */
-export function GetSelfReceive (query:PageQuery) {
-    return request({
-        url: '/api/system/message_center/get_self_receive/',
-        method: 'get',
-        params: query
-    })
+export function GetSelfReceive(query: PageQuery) {
+	return request({
+		url: '/api/system/message_center/get_self_receive/',
+		method: 'get',
+		params: query,
+	});
 }
 
 /***
@@ -42,9 +40,24 @@ export function GetSelfReceive (query:PageQuery) {
  * @param data
  */
 export function UpdatePassword(data: EditReq) {
-    return request({
-        url: '/api/system/user/change_password/',
-        method: 'put',
-        data: data
-    })
+	return request({
+		url: '/api/system/user/change_password/',
+		method: 'put',
+		data: data,
+	});
+}
+
+/***
+ * 上传头像
+ * @param data
+ */
+export function uploadAvatar(data: AddReq) {
+	return request({
+		url: 'api/system/file/',
+		method: 'post',
+		data: data,
+		headers: {
+			'Content-Type': 'multipart/form-data',
+		},
+	});
 }

web/src/views/system/personal/index.vue

@@ -6,10 +6,9 @@
 				<el-card shadow="hover" header="个人信息">
 					<div class="personal-user">
 						<div class="personal-user-left">
-							<el-upload class="h100 personal-user-left-upload" :action="uploadAvatar.action" :headers="uploadAvatar.headers" multiple :limit="1">
-								<img v-if="state.personalForm.avatar" :src="state.personalForm.avatar" />
-								<img v-else src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
-							</el-upload>
+							<!-- <el-avatar :size="100" v-if="state.personalForm.avatar" :src="state.personalForm.avatar" /> -->
+							<!-- <el-avatar :size="100" v-else src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" /> -->
+							<avatarSelector @uploadImg="uploadImg"></avatarSelector>
 						</div>
 						<div class="personal-user-right">
 							<el-row>
@@ -174,13 +173,18 @@
 </template>
 
 <script setup lang="ts" name="personal">
-import { reactive, computed, onMounted, ref } from 'vue';
+import { reactive, computed, onMounted, ref, defineAsyncComponent } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
 import * as api from './api';
 import { ElMessage } from 'element-plus';
 import { getBaseURL } from '/@/utils/baseUrl';
 import { Session } from '/@/utils/storage';
 import { useRouter } from 'vue-router';
+import { useUserInfo } from '/@/stores/userInfo';
+const userStore = useUserInfo();
+
+// 头像裁剪组件
+const avatarSelector = defineAsyncComponent(() => import('/@/components/avatarSelector/index.vue'));
 
 // 当前时间提示语
 const currentTime = computed(() => {
@@ -339,6 +343,17 @@ const settingPassword = () => {
 		}
 	});
 };
+
+const uploadImg = (data: any) => {
+	console.log(data);
+	let formdata = new FormData();
+	formdata.append('key', 'test_file');
+	formdata.append('file', data);
+	api.uploadAvatar(formdata).then((res: any) => {
+		// userStore.setUserInfos()
+		console.log(res);
+	});
+};
 </script>
 
 <style scoped lang="scss">