Angular 4获取上传的双输入文件事件答案

【问题标题】：Angular 4 get double input file event for uploadAngular 4获取上传的双输入文件事件
【发布时间】：2018-03-28 15:24:04
【问题描述】：

我有两个如下所示的输入文件：

<input required accept=".jpg" #file (change)="coverUpload($event)" id="file" name="file" type="file" >

<input required accept=".pdf" #pdf (change)="fileUpload($event)"  id="pdfFile" name="pdfFile" type="file" >



 <button md-raised-button color="primary" type="submit" (click)="addNew()" [disabled]="!form.valid">Submit</button>

这里是 ts 代码：

selectedFiles: FileList;
selectedPdf: FileList;

coverUpload(event) {
      this.selectedFiles = event.target.files;
    }

fileUpload(event) {
      this.selectedPdf = event.target.files;
    }

 addNew() {

       let fle = this.selectedFiles.item(0);
       console.log(fle.name);
       let flePdf = this.selectedPdf.item(0);
       console.log(flePdf.name);

        this.bookSrv.addBook(this.books, fle, flePdf);
         this.router.navigate(['/mybooks']);
  }

这是我的 BookService ：

 addBook(bok: Book, file: File, pdfFile: File) {
            if (this.uid != undefined && this.uid != null) {
                let key = this.afd.list('books' + '/' + 'list').$ref.ref.push().key;
                let userid = this.afAuth.auth.currentUser.uid;
                this.firebasestorage.ref(`books` + `/` + key + `/` + this.currentUserId + bok.bookname).put(file).then(
                this.firebasestorage.ref(`books` + `/` + key + `/` + this.currentUserId + bok.bookname).put(pdfFile).then(
                    snapshot => {
                        bok.icon = snapshot.downloadURL;
                        bok.pdf = snapshot.downloadURL;       
                        this.afd.object('books/list' + '/' + key + this.currentUserId).set(bok);
                    }));

            }
        }

在我提交到 firebase 后，它只上传了最后一个文件，如何让它同时上传两个文件，谢谢。

【问题讨论】：

我认为你也应该发布上传到firebase的代码.....你发送图像的格式是base64吗？.....你检查过控制台时打印的值是什么.log()?
好的，谢谢@JoseKj 我已经更新了我的代码
好的，我会检查的
两个文件都上传到 Firebase 存储了吗？...请检查
感谢@JoseKj，但它刚刚上传了第一个文件并且列表混乱了谢谢

标签： angular typescript firebase firebase-storage angularfire2

【解决方案1】：

问题来自图书服务，firebase 存储中的图像和 pdf 文件夹需要分开，如下所示：

 addBook(bok: Book, cover: File, pdfFile: File) {
        if (this.uid != undefined && this.uid != null) {
            let key = this.afd.list('books' + '/' + 'list').$ref.ref.push().key;
            let userid = this.afAuth.auth.currentUser.uid;
            this.firebasestorage.ref(`cover` + `/` + key + `/` + this.currentUserId + bok.bookname).put(cover).then(
                snapshot => {
                    bok.cover = snapshot.downloadURL;      
                    this.afd.object('books/list' + '/' + key + this.currentUserId).set(bok);
                });
            this.firebasestorage.ref(`pdf` + `/` + key + `/` + this.currentUserId + bok.bookname).put(pdfFile).then(            
                snapshot => {
                    bok.file = snapshot.downloadURL;       
                    this.afd.object('books/list' + '/' + key + this.currentUserId).set(bok);
                    });    
        }
    }

【讨论】：

【解决方案2】：

试试这个

 addBook(bok: Book, file: File, pdfFile: File) {
        if (this.uid != undefined && this.uid != null) {
            let key = this.afd.list('books' + '/' + 'list').$ref.ref.push().key;
            let userid = this.afAuth.auth.currentUser.uid;
            this.firebasestorage.ref(`books` + `/` + key + `/` + this.currentUserId + bok.bookname).put(file).then(
                snapshot => {
                    bok.icon = snapshot.downloadURL;
                    this.afd.object('books/list' + '/' + key + this.currentUserId).set(bok);
                });
             this.firebasestorage.ref(`books` + `/` + key + `/` + this.currentUserId + bok.bookname).put(pdfFile).then(
                 snapsht => {
                    bok.pdf = snapsht.downloadURL;     
                    this.afd.object('books/list' + '/' + key + this.currentUserId).set(bok);
                });
        }
    }

【讨论】：