a

app-angular/src/modules/user/page-add/page-add.component.html

@@ -10,9 +10,21 @@
 </ion-header>
 
 <ion-content color="light">
+  <div style="display: flex; justify-content: center;">
+  <ion-avatar (click)="fileInput.click()">
+    <img *ngIf="selectedImage" [src]="selectedImage" alt="Selected Avatar" />
+    <img *ngIf="!selectedImage" src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="Default Avatar" />
+    <ion-input [(ngModel)]="userAdd.img"></ion-input>
+  </ion-avatar>
+  
+  <input type="file" (change)="onFileSelected($event)" #fileInput style="display: none;" accept="image/*" />
+  
+</div>
+  
   <ion-card>
     <ion-list>
       <ion-item>
+        
         <ion-label position="stacked">名字：</ion-label>
         <ion-input [(ngModel)]="userAdd.name"></ion-input>
       </ion-item>

app-angular/src/modules/user/page-add/page-add.component.ts

@@ -13,6 +13,7 @@ export class PageAddComponent {
     tag: '',
     desc: ''
   };
+  selectedImage: string | ArrayBuffer | null = null;
 
   constructor(
     private router: Router
@@ -25,6 +26,7 @@ export class PageAddComponent {
     newContact.set('name', this.userAdd.name);
     newContact.set('tag', this.userAdd.tag);
     newContact.set('desc', this.userAdd.desc);
+    newContact.set('img', this.userAdd.img);
     // 设置其他联系人信息...
 
     try {
@@ -35,4 +37,16 @@ export class PageAddComponent {
       console.error('Error while saving new contact', error);
     }
   }
-}
+
+  onFileSelected(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+    if (inputElement.files && inputElement.files[0]) {
+      const file = inputElement.files[0];
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.selectedImage = reader.result;
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+}