Question

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

<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后，它只上传最后一个文件，如何让它上传两个文件，谢谢。

Answer 1

试试这个

 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);
                });
        }
    }

Answer 2

问题来自Book Service，firebase存储中的image和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);
                    });    
        }
    }

Angular 4获取双输入文件事件以进行上传

2 个答案: