我有这个代码将图像上传到云存储并将网址存储在云端防火墙中。如果我上传单个图像,则会产生罚款,但是当我选择多个图像并上传时,它只会在云端防火墙中保存一个图像网址。 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;
});
}
}
}