fix：注册上传头像

src/view/register/index.vue

@@ -38,6 +38,15 @@
       </van-form>
       <van-form ref="personInfoRef" v-show="state.active == 1" required="auto">
         <van-cell-group inset>
+          <van-field>
+            <template #label>
+              <span>头像</span>
+            </template>
+            <template #input>
+              <van-uploader  v-model="state.form.fileList" multiple :max-count="1" :before-read="beforeRead" :after-read="afterRead" />
+            </template>
+          </van-field>
+
           <van-field v-model="state.form.nickName" label="姓名" placeholder="姓名"
             :rules="[{ required: true, message: '请填写姓名' }]" />
           <van-field label="性别" :rules="[{ required: false }]">
@@ -247,6 +256,7 @@ import { showNotify } from 'vant'
 import { UserTypeTooltip } from '/@/constants/pageConstants'
 import { isPasswordValid } from '/@/utils/stringUtils'
 
+const uploadUrl = import.meta.env.VITE_UPLOAD;
 const sm3 = crypto.sm3
 const loginApi = useLoginApi()
 const router = useRouter()
@@ -300,6 +310,7 @@ const state = reactive({
     confirmPassword: '',
     status: '10', // 用户状态
     describe: '', // 用户描述
+    fileList: [],
     avatar: '',
     idType: '', //证件类型
     idCode: '', // 证件号
@@ -618,11 +629,102 @@ const confirmCascadeSelection = () => {
   }
 }
 
+const beforeRead = (file: any) => {
+  if (
+    file.type !== 'image/jpeg' &&
+    file.type !== 'image/jpg' &&
+    file.type !== 'image/png' &&
+    file.type !== 'image/bmp' &&
+    file.type !== 'image/gif'
+  )
+  {
+    showNotify({
+      type: 'danger',
+      message: '上传图片必须是JPG/PNG/BMP/GIF类型!'
+    });
+    return false;
+  } else if (file.size / 1024 / 1024 > 2) {
+    showNotify({
+      type: 'danger',
+      message: '图片大小不能超过2MB!'
+    });
+    return false;
+  }
+  return true;
+};
+
+// 上传头像方法
+const afterRead = async (file: any) => {
+  // 创建FormData对象
+  const formData = new FormData();
+  formData.append('file', file.file);
+
+  try {
+    // 使用fetch上传文件
+    const response = await fetch(uploadUrl, {
+      method: 'POST',
+      body: formData
+    });
+
+    if (response.ok) {
+      const result = await response.json();
+      console.log(result);
+      // 假设服务器返回的格式为 { code: 200, data: { url: "文件URL" } }
+      if (result.Code === 200 && result.Data) {
+        // 清空之前的头像，只保留最新上传的
+        state.form.avatar = result.Data;
+        state.form.fileList = [{
+          url: result.Data,
+          isImage: true
+        }]
+        showNotify({
+          type: 'success',
+          message: '头像上传成功'
+        });
+      } else {
+        // 上传失败，清空头像
+        state.form.avatar = '';
+        state.form.fileList = [];
+        showNotify({
+          type: 'danger',
+          message: '头像上传失败：' + (result.message || '未知错误')
+        });
+      }
+    } else {
+      // 上传失败，清空头像
+      state.form.avatar = '';
+      state.form.fileList = [];
+      showNotify({
+        type: 'danger',
+        message: '头像上传失败：服务器错误'
+      });
+    }
+  } catch (error) {
+    console.error('头像上传错误:', error);
+    // 上传失败，清空头像
+    state.form.avatar = '';
+    state.form.fileList = [];
+    showNotify({
+      type: 'danger',
+      message: '头像上传失败：网络错误'
+    });
+  }
+}
+
 const onRegister = async () => {
   const form = state.form.registerType == '10' ? personInfoRef.value : personInfoRef.value
   const [error] = await to(form.validate())
   if (error) return
   
+  // 验证头像是否已上传
+  if (!state.form.avatar) {
+    showNotify({
+      type: 'danger',
+      message: '请上传头像'
+    });
+    return
+  }
+  
   // 如果是课题组负责人，需要校验项目信息
   if (state.form.registerType === '20') {
     if (!validateProjectList()) {
@@ -828,4 +930,4 @@ onMounted(async () => {
     }
   }
 }
-</style>
+</style>