fix: 完善图片上传

auto-imports.d.ts

@@ -6,5 +6,7 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-
+  const showFailToast: typeof import('vant/es').showFailToast
+  const showSuccessToast: typeof import('vant/es').showSuccessToast
+  const showToast: typeof import('vant/es').showToast
 }

rsbuild.config.ts

@@ -12,11 +12,9 @@ export default defineConfig({
     rspack: {
       plugins: [
         AutoImport({
-          dts: 'auto-imports.d.ts',
           resolvers: [VantResolver()],
         }),
         Components({
-          dts: 'components.d.ts',
           resolvers: [VantResolver()],
         }),
       ],
@@ -26,7 +24,7 @@ export default defineConfig({
     proxy: {
       // http://localhost:3000/api -> http://localhost:3000/api
       // http://localhost:3000/api/foo -> http://localhost:3000/api/foo
-      '/api': 'http://localhost:9000/api',
+      '/api': 'http://localhost:9000',
     },
   },
 });

src/App.vue

@@ -77,7 +77,13 @@
         />
         <van-field name="photo" label="照片">
           <template #input>
-            <van-uploader v-model="form.photoList" :max-count="1" />
+            <van-uploader
+              v-model="form.photoList"
+              :max-count="1"
+              :max-size="20 * 1024 * 1024"
+              :after-read="afterRead"
+              @oversize="onOversize"
+            />
           </template>
         </van-field>
         <van-field
@@ -149,6 +155,8 @@
       <van-date-picker
         v-model="birthValues"
         title="选择日期"
+        :min-date="minDate"
+        :max-date="maxDate"
         @confirm="onBirthConfirm"
         @cancel="showBirthPicker = false"
       />
@@ -159,14 +167,15 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
 import axios from 'axios';
-import { showSuccessToast, showFailToast } from 'vant';
+import type {UploaderFileListItem} from 'vant';
 
 const form = reactive({
   name: '',
   phoneNumber: '',
   gender: '0',
   genderText: '男',
-  photoList: [] as unknown[],
+  photoList: [] as UploaderFileListItem[],
+  ossId: 0,
   idCardNumber: '',
   birthDate: '',
   age: '' as number | '',
@@ -181,6 +190,8 @@ const form = reactive({
   emergencyContactPhone: '',
   householdRegistrationAddress: '',
 });
+const minDate = new Date(1960, 0, 1);
+const maxDate = new Date(2025, 0, 1);
 
 const phoneRules = [
   { required: true, message: '请填写手机号码' },
@@ -198,6 +209,51 @@ const ageRules = [{ pattern: /^\d{1,3}$/, message: '年龄格式错误' }];
 const showPoliticalPicker = ref(false);
 const showBirthPicker = ref(false);
 const submitting = ref(false);
+const submitSuccess = ref(false);
+// function beforeRead(file: File | File[]) {
+//   const files = Array.isArray(file) ? file : [file];
+//   const limit = 20 * 1024 * 1024;
+//   const ok = files.every((f) => f.size <= limit);
+//   if (!ok) {
+//     showFailToast('文件大小不能超过20MB');
+//   }
+//   return ok;
+// }
+async function afterRead(item: UploaderFileListItem) {
+  // const items = Array.isArray(file) ? file : [file];
+  // for (const item of items) {
+    try {
+      const fd = new FormData();
+      fd.append('file', item.file as File);
+      const { data: responseData, status } = await axios.post('/api/employee/info/photo/upload', fd, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+        timeout: 60_000,
+      });
+      if (status >= 200 && status < 300) {
+        if (responseData.success) {
+          const data = responseData.data;
+          console.log('[data]', data);
+          const url = data.url;
+          if (url) {
+            form.ossId = data.ossId;
+            item.url = url;
+          }
+          // submitSuccess.value = true;
+          // showSuccessToast({message: '提交成功', duration: 5000});
+        } else {
+          showFailToast('提交失败');
+        }
+      } else {
+        showFailToast('提交失败');
+      }
+    } catch (e) {
+      showFailToast('图片上传失败');
+    }
+  // }
+}
+function onOversize() {
+  showFailToast('文件大小不能超过20MB');
+}
 
 const politicalOptions = [
   { value: '1', text: '党员' },
@@ -219,7 +275,7 @@ const politicalOptions = [
 //   value: o.key,
 // }));
 
-const birthValues = ref<string[]>([]);
+const birthValues = ref<string[]>(['2000', '01', '01']);
 
 void [ageRules, politicalOptions, birthValues];
 
@@ -258,6 +314,10 @@ watch(
 );
 
 async function onSubmit() {
+  if (submitSuccess.value) {
+    showToast('您已提交\n无需再次提交');
+    return;
+  }
   if (submitting.value) return;
   submitting.value = true;
   try {
@@ -276,14 +336,18 @@ async function onSubmit() {
       emergencyContact: form.emergencyContact,
       emergencyContactPhone: form.emergencyContactPhone,
       householdRegistrationAddress: form.householdRegistrationAddress,
-      photo: Array.isArray(form.photoList)
-        ? form.photoList.map((i: any) => i.url || i.content || '')
-        : [],
+      ossId: form.ossId,
+      // photo:
+      //   Array.isArray(form.photoList) && form.photoList.length
+      //     ? ((form.photoList[0] as { url?: string;}).url ||
+      //         '')
+      //     : '',
     };
     const { data: responseData, status } = await axios.post('/api/employee/baseInfo', payload);
     if (status >= 200 && status < 300) {
       if (responseData.success) {
-        showSuccessToast('提交成功');
+        submitSuccess.value = true;
+        showSuccessToast({message: '提交成功', duration: 5000});
       } else {
         showFailToast('提交失败');
       }