Загрузка изображений AngularFireStorage - PullRequest
Новая
       13

Загрузка изображений AngularFireStorage

0 голосов
/ 27 апреля 2018

У меня есть этот код, который загружает изображения в облачное хранилище и сохраняет URL-адрес в облачном хранилище. Если я загружаю одно изображение, оно отлично работает, но когда я выбираю несколько изображений и загружаю их, в облачном хранилище сохраняется только один URL-адрес изображения. requestInfo.media это массив media: string[];

Мой html файл. 

    <image-upload [class]="'custom-class'" [style]="customStyle" (change)="onChange($event)" accept=".png, .jpg, .jpeg">
    </image-upload>

Мой ts файл. 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { RequestTimePage } from '../request-time/request-time';
import { AppServiceProvider } from '../../providers/app-service/app-service';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFireStorage } from 'angularfire2/storage';

@IonicPage()
@Component({
    selector: 'page-request-photo',
    templateUrl: 'request-photo.html',
})
export class RequestPhotoPage {
    description: string;
    url: any;
    public photos: any;
    public base64Image: string;
    imageURL: any[];
    ready: boolean;
    outPut: any = [];
    files: any = [];

    constructor(public navCtrl: NavController,
        public navParams: NavParams,
        public app: AppServiceProvider,
        public afs: AngularFirestore,
        public af: AngularFireStorage,
        public toast: ToastController
    ) { }

    // Custom upload photos button cofiguration
    customStyle = {
        selectButton: {
            "font-size": "15px"
        }
    };

    ionViewWillEnter() {
    }

    onChange(event) {
        this.ready = false;
        this.files = event.target.files;
        console.log('file', this.files);
        this.outPut.push(this.files);
        console.log('files', this.outPut);

        for (let image of this.outPut) {

            let imageRef = this.af.storage.ref(`requests/${this.requestInfo.media}`);
            imageRef.put(image[0])
                .then(res => {
                    this.requestInfo.media = res.metadata.downloadURLs;
                    // this.imageURL = this.requestInfo.media;
                    this.ready = true;
                }).catch(err => {
                    console.log("Unable to save photo", err);
                    this.toast.create({
                        message: 'There was error adding image',
                        duration: 3000,
                        position: 'bottom'
                    }).present();
                    this.ready = true;
                });

        }

    }


}
...