Ionic 5页面双文件上传异常：错误调用处理函数问题

你遇到的疫苗记录上传错误调用医生证明处理函数的问题，核心原因是HTML中存在重复的ID属性：

• 两个文件上传输入框的id都设置为file
• 对应的<label>标签的for属性也都指向file

在HTML规范中，ID必须是页面唯一的，浏览器会优先匹配第一个出现的ID元素。所以点击疫苗记录的"Upload Computer"标签时，实际触发的是第一个ID为file的输入框（医生证明的上传框）的change事件，进而调用了uploadDocNoteComputer函数。

修改HTML代码，为每个文件上传组件设置唯一的ID和对应的label关联：

<div class="container">
      <h5 class="ion-padding-start">Doctor's Note:</h5>
      <div [hidden]="!editState">
        <div id="upload" [hidden]="!isphone">
           <ion-button color="primary" fill='clear' (click)="uploadDocNotePhone()" >Upload Phone</ion-button>
           <ion-icon name="document-outline" [class.red]="docURL === ''" [class.green]="docURL !== ''" ></ion-icon>
        </div>
        <div id="upload" [hidden]="isphone">
            <ion-button color="primary" fill='clear'>
              <!-- 唯一ID：doc-file -->
              <input type="file" name="file" id="doc-file" class="inputfile" (change)="uploadDocNoteComputer($event)" accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx"/>
              <!-- label的for对应doc-file -->
              <label for="doc-file">Upload Computer</label>
              <ion-icon name="document-outline" [class.red]="docURL === ''" [class.green]="docURL !== ''"></ion-icon>
            </ion-button>
        </div>
      </div>
   </div>

    <div class="container">
      <h5 class="ion-padding-start">Vaccination Records:</h5>
      <div [hidden]="!editState">
        <div id="upload" [hidden]="!isphone">
           <ion-button color="primary" fill='clear' (click)="uploadVaccRecordPhone()">Upload Phone</ion-button>
           <ion-icon name="document-outline" [class.red]="vaccURL === ''" [class.green]="vaccURL !== ''"></ion-icon>
        </div>
        <div id="upload" [hidden]="isphone">
            <ion-button color="primary" fill='clear'>
              <!-- 唯一ID：vacc-file -->
              <input type="file" name="file" id="vacc-file" class="inputfile" (change)="uploadVaccRecordComputer($event)" accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx"/>
              <!-- label的for对应vacc-file -->
              <label for="vacc-file">Upload Computer</label>
              <ion-icon name="document-outline" [class.red]="vaccURL === ''" [class.green]="vaccURL !== ''"></ion-icon>
            </ion-button>
        </div>
      </div>
   </div>

修复ID重复问题后，还可以确认以下两点：

• 检查uploadVaccRecordComputer和uploadDocNoteComputer函数中的事件参数event是否正确传递，确保event.target.files[0]指向当前上传的文件
• 服务层的uploadVaccinationRecords和uploadDoctorsNote函数逻辑独立，不存在变量污染（目前代码中两个函数使用各自的存储路径和变量，这部分是正常的）

内容的提问来源于stack exchange，提问作者Willem Ghijsen