使用ngx-uploader上传到Firebase存储

时间:2017-01-12 00:10:42

标签: angular file-upload firebase firebase-storage angularfire2

如何使用ngx-uploader或类似内容将图片上传到firebase?

我面临的主要问题是Angular 2上传器的大多数实现需要一个URL,但我需要上传到firebase参考,我不知道如何将它们放在一起或者甚至可以完成。也许我不是以正确的方式看待它。

我发现了script

uploadImage(name, data) {
    let promise = new Promise((res,rej) => {
      let fileName = name + ".jpg";
      let uploadTask = firebase.storage().ref(`/teams/${fileName}`).put(data);
      uploadTask.on('state_changed', function(snapshot) {
      }, function(error) {
        rej(error);
      }, function() {
        var downloadURL = uploadTask.snapshot.downloadURL;
        res(downloadURL);
      });
    });
    return promise;
  }

这表明我需要使用firebase.storage().ref

但是如果我看ngx-uploader documentation example,我就无法弄清楚我是如何使用它的。

1 个答案:

答案 0 :(得分:1)

如果您按照文档操作,则可能正在运行此代码

 startUpload() {
    this.inputUploadEvents.emit('startUpload');
  }

将运行将使用NgUploaderOptions中的url变量的代码,如果您使用的是firebase存储,则该代码并不真正需要。我做的是我像这样添加(更改)事件

 <input (change)="onChange($event)"
           type="file"
           class="hidden"
           ngFileSelect
           [options]="options"
           [events]="inputUploadEvents"
           (onUpload)="handleUpload($event)"
           (onPreviewData)="handlePreviewData($event)"
           (beforeUpload)="beforeUpload($event)">

在背面

   onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];

    }

现在你只需要在ref.put()...

中插入this.file

请注意,这仅适用于单张图像。希望这会有所帮助。