TypeScript storage.AngularFireStorage类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@angular/fire/storage.AngularFireStorage类的典型用法代码示例。如果您正苦于以下问题：TypeScript AngularFireStorage类的具体用法？TypeScript AngularFireStorage怎么用？TypeScript AngularFireStorage使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了AngularFireStorage类的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: startUpload

    async startUpload(event: FileList) {

        const file = event.item(0);

        // Client-side validation: Must be an image and smaller than 10MB.
        if (file.type.split('/')[0] !== 'image') {
            return this.snackBar.open('Unsupported File Type', '', { duration: 3000, panelClass: 'snackbar-error' });
        }
        // Must be smaller than 20MB, http://www.unitconversion.org/data-storage/megabytes-to-bytes-conversion.html
        if (file.size > 10485760) {
            return this.snackBar.open('Images must be smaller than 10MB', '', { duration: 5000, panelClass: 'snackbar-error' });
        }

        const dictionary = await this.dictionariesService.getDictionary();

        // Replace spaces w/ underscores in dict name, remove special characters from lexeme so image converter can accept filename
        const _dictName = dictionary.name.replace(/\s+/g, '_');
        const _lexeme = this.entry.lx.replace(/[^a-z0-9+]+/gi, '_');
        const fileTypeSuffix = file.name.match(/\.[0-9a-z]+$/i)[0];

        const path = `images/${_dictName}_${dictionary.id}/${_lexeme}_${this.entry.id}_${new Date().getTime()}${fileTypeSuffix}`;

        // optional metadata
        const { displayName, uid } = await this.auth.getUser();
        const customMetadata = { uploadedBy: displayName };

        this.task = this.storage.upload(path, file, { customMetadata });
        this.percentage = this.task.percentageChanges();
        this.task.then(snap => {
            if (snap.state === 'success') { this.savePhoto(path, displayName, uid, this.entry.lx, dictionary.id); }
        }).catch(() => {
            this.snackBar.open('Image Upload Failed', '', { duration: 3000, panelClass: 'snackbar-error' });
        });
    }

开发者ID:jacobbowdoin，项目名称:RapidWords，代码行数:34，代码来源:photo-upload.component.ts

示例2: onImageChange

  onImageChange(event:any) {
    const image = event.target.files[0];
    const uploader = document.getElementById('uploader') as HTMLInputElement;
    const storageRef = this.storage.ref('images/' + Date.now() + image.name);
    const task = storageRef.put(image);

    task.snapshotChanges().subscribe((snapshot) => {
        document.getElementById('buttonFile').style.visibility = 'hidden';
        document.getElementById('uploader').style.visibility = 'visible';

        const percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        uploader.value = percentage.toString();
      },
      (err:any) => {
        document.getElementById('buttonFile').style.visibility = 'visible';
        document.getElementById('uploader').style.visibility = 'hidden';
        uploader.value = '0';
      },
      () => {
        uploader.value = '0';
        document.getElementById('buttonFile').style.visibility = 'visible';
        document.getElementById('uploader').style.visibility = 'hidden';
        this.draftMessage = task.task.snapshot.ref.name.substring(0, 13);
        this.draftImage = task.task.snapshot.ref.name.substring(0, 13);
        storageRef.getDownloadURL().subscribe(url => {
          this.draftImageDownloadURL = url;
          this.addMessage();
          event.target.value = '';
        });
      });
  }

开发者ID:PERRINN，项目名称:client-web，代码行数:31，代码来源:chat.component.ts

示例3: startUpload

  startUpload(event: FileList) {
    // The File object
    const file = event.item(0);

    // Client-side validation example
    if (file.type.split('/')[0] !== 'image') {
      console.error('unsupported file type :( ');
      return;
    }

    // The storage path
    const path = `test/${new Date().getTime()}_${file.name}`;

    // Totally optional metadata
    const customMetadata = { app: 'My AngularFire-powered PWA!' };

    // The main task
    this.task = this.storage.upload(path, file, { customMetadata });

    // Progress monitoring
    this.percentage = this.task.percentageChanges();
    this.snapshot = this.task.snapshotChanges().pipe(
      tap(snap => {
        if (snap.bytesTransferred === snap.totalBytes) {
          // Update firestore on completion
          this.db.collection('photos').add({ path, size: snap.totalBytes });
        }
      }),
      finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL() )
    );


    // The file's download URL
  }

开发者ID:geeksmarter，项目名称:andrews.codes，代码行数:34，代码来源:upload-page.component.ts

示例4: uploadImage

  async uploadImage(file) {
   const filePath = Date.now() + '.jpg';
   const ref = this.storage.ref('upload').child(filePath);
   const image = await ref.putString(file, 'data_url', {
     contentType: 'image/jpg'
   });
   const url = await this.getImageUrl(image);
   return url;
 }

开发者ID:niawjunior，项目名称:blog，代码行数:9，代码来源:upload-content.service.ts

示例5: it

 it('should resolve the task as a promise', (done) => {
   const data = { angular: "promise" };
   const blob = new Blob([JSON.stringify(data)], { type : 'application/json' });
   const ref = afStorage.ref('af.json');
   const task: AngularFireUploadTask = ref.put(blob);
   task.then(snap => { 
     expect(snap).toBeDefined(); 
     done();
   }).catch(done.fail);
 });

开发者ID:PaulD11，项目名称:angularfire2，代码行数:10，代码来源:storage.spec.ts

注：本文中的@angular/fire/storage.AngularFireStorage类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。