使用ngx-uploader上传到Firebase存储

Question

如何使用ngx-uploader或类似工具将图片上传到firebase？

我面临的主要问题是，大多数Angular 2 uploader的实现都需要一个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，我就不知道如何使用它了。

Answer 1

如果您遵循了文档，那么您可能正在运行以下代码

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

它将运行将使用NgUploaderOptions中的url变量的代码，如果您使用的是firebase存储，则不需要该变量。我所做的是添加(change)事件，如下所示

 <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 ...

请注意，这仅适用于单个图像。希望这能有所帮助。