Ionic 5 无法在同一页面中两次上传 2 个文件，调用错误 function

Question

我有一个 Ionic 5 应用程序，我需要在同一页面上上传 2 个单独的文件。 我有为手机和浏览器处理这个问题的功能。 在这种情况下，错误的是浏览器。

在 mypage.page.html 上处理此问题的浏览器的两个函数如下：

<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'>
              <input type="file" name="file" id="file" class="inputfile" (change)="uploadDocNoteComputer($event)" accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx"/>
              <label for="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'>
              <input type="file" name="file" id="file" class="inputfile" (change)="uploadVaccRecordComputer($event)" accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx"/>
              <label for="file">Upload Computer</label>
              <ion-icon name="document-outline" [class.red]="vaccURL === ''" [class.green]="vaccURL !== ''"></ion-icon>
            </ion-button>
        </div>
      </div>
   </div>

mypage.page.ts中对应的函数如下：

async uploadVaccRecordComputer(event) {
    const randKidDocRefId = this.calcService.makeRandomId(15);
    this.loadingService.present();
    await this.browserImageService.uploadVaccinationRecords(event, randKidDocRefId, "application/pdf").then((uploadedurl: any) => {
            this.loadingService.dismiss();
            console.log('uploadedurl 1: ', uploadedurl);
            this.vaccURL = uploadedurl;
    });
    this.loadingService.dismiss();
  }


async uploadDocNoteComputer(event) {
    const randKidDocRefId = this.calcService.makeRandomId(15);
    this.loadingService.present();
    await this.browserImageService.uploadDoctorsNote(event, randKidDocRefId, "application/pdf").then((uploadedurl: any) => {
            this.loadingService.dismiss();
            this.docURL = uploadedurl;
    });

    this.loadingService.dismiss();
  }

我的服务中对应的功能是：

async uploadVaccinationRecords(event: any, kidVaccRefID: string, contentType: string) {
            // contentType should be like 'image/jpeg' or pdf or some other type to set metadata

            console.log("IN uploadVaccinationRecords kidVaccRefID !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", kidVaccRefID)
            
            const metadata = {
                  contentType: contentType
            };

            const imgRef = this.firestore.ref('/vaccinationrecords/' + firebase.auth().currentUser.uid + '/kidvaccref/' + kidVaccRefID);

            // DELETES OLD RECORD IF FOUND
            await imgRef.getDownloadURL().then((foundURL) => {
                  console.log("URL FOUND");
                  const foundRef = this.firestore.refFromURL(foundURL);
                        return foundRef.delete().then(() => {
                              const exit: ExitMessage = {
                                    exit: 0,
                                    success: true
                              }
                              return exit;
                        })
                        .catch(err => {
                              console.log("This is the error onURLFound", err);
                              const exit: ExitMessage = {
                                    exit: 1,
                                    success: false
                              }
                              return exit;
                        })
            })
            .catch((err) => {
                  console.log("URL NOT FOUND ERROR", err);
            });
            
            const uploadTask = imgRef
                                    .put(event.target.files[0], metadata);

// also tried  const uploadTask = imgRef.put(event.target.files[1], metadata);
// but no luck
            
            let tempProgFlag = false;

            const complete = async() => {
                        // Upload completed successfully, now we can get the download URL
                              await uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
            
                        console.log('File available at', downloadURL);
                        tempProgFlag = true;
                        console.log('PROGRESS', tempProgFlag);
                        this.progFlag = tempProgFlag;
                        console.log('PROGRESS 2', this.progFlag);
                        console.log('downloadURL here', downloadURL);
            
                        return downloadURL;
                        });
                  };
            
            uploadTask.on(
                              firebase.storage.TaskEvent.STATE_CHANGED,
                              this.nextFunc(),
                              this.error(),
                              complete);
            
            await this.waitonProgress();

            this.vaccurl = await imgRef.getDownloadURL();

            console.log('File available at past this.imgurl', this.vaccurl);


            
            return this.vaccurl;
      
      }

async uploadDoctorsNote(event: any, kidDocRefId: string, contentType: string) {

            console.log("IN uploadDoctorsNote kidDocRefId !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", kidDocRefId)


            // contentType should be like 'image/jpeg' or pdf or some other type to set metadata
            const metadata = {
              contentType: contentType
            };
      
            const imgRef = this.firestore.ref('/doctorsnotes/' + firebase.auth().currentUser.uid + '/kiddocref/' + kidDocRefId);

            // DELETES OLD RECORD IF FOUND
            await imgRef.getDownloadURL().then((foundURL) => {
                  console.log("URL FOUND");
                  const foundRef = this.firestore.refFromURL(foundURL);
                        return foundRef.delete().then(() => {
                              const exit: ExitMessage = {
                                    exit: 0,
                                    success: true
                              }
                              return exit;
                        })
                        .catch(err => {
                              console.log("This is the error onURLFound", err);
                              const exit: ExitMessage = {
                                    exit: 1,
                                    success: false
                              }
                              return exit;
                        })
            })
            .catch((err) => {
                  console.log("URL NOT FOUND ERROR", err);
            });
        
            const uploadTask = imgRef
                                .put(event.target.files[0], metadata);
        
            let tempProgFlag = false;
      
            const complete = async() => {
                    // Upload completed successfully, now we can get the download URL
                          await uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
        
                        console.log('File available at', downloadURL);
                        tempProgFlag = true;
                        console.log('PROGRESS', tempProgFlag);
                        this.progFlag = tempProgFlag;
                        console.log('PROGRESS 2', this.progFlag);
                        console.log('downloadURL here', downloadURL);

        
                        return downloadURL;
                      });
                  };
        
            uploadTask.on(
                          firebase.storage.TaskEvent.STATE_CHANGED,
                          this.nextFunc(),
                          this.error(),
                          complete);
        
            await this.waitonProgress();
      
            this.docurl = await imgRef.getDownloadURL();
      
            console.log('File available at past this.docurl', this.docurl);
      
      
            
            return this.docurl;
        
        }

医生记录上传得很好并且看起来按预期工作。 问题发生在我尝试上传疫苗接种记录时，它调用了 uploadDocNoteComputer（通过日志记录验证了这一点）。 我认为这与可能共享的 $event 变量有关，但我不确定如何消除这一点的歧义。 任何帮助深表感谢。

Answer 1

当我将文件上的 ID 分别更改为 file1 和 file2 时，它会起作用。 ID 必须不同：

<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'>
              <input type="file" name="file1" id="file1" class="inputfile" (change)="uploadDocNoteComputer($event)" accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx"/>
              <label for="file1">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'>
              <input type="file" name="file2" id="file2" class="inputfile" (change)="uploadVaccRecordComputer($event)" accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx"/>
              <label for="file2">Upload Computer</label>
              <ion-icon name="document-outline" [class.red]="vaccURL === ''" [class.green]="vaccURL !== ''"></ion-icon>
            </ion-button>
        </div>
      </div>
   </div>