在Firebase存储中上传文件

Question

我在Firebase中相当陌生，并尝试使用他们的文档来学习它。

我正在尝试上传文件，但出现错误。

下面是我的代码：

home.ts

//...

   showPreview(event: any) {
  this.selectedImage = event.target.files[0];
  }

  save() {

    // Points to the root reference
    var storageRef = firebase.storage().ref();

    // Points to 'images'
    var ref = storageRef.child('images');
    var file = this.selectedImage.name;
    ref.put(file).then(function(snapshot) {
      console.log('Uploaded a blob or file!');
    });
}}

hmoe.html

<input type="text" placeholder="Save with Key" name="id" [(ngModel)]="id">
  <br><br>
  <input type="file" (change)="showPreview($event)">
  <button (click)="save()">Save</button>

单击保存按钮后选择文件后，出现此错误：

Answer 1

您可以按照documentation中的说明进行以下操作

HTML

//....
<input type="file" id="input">
//....

JavaScript / TypeScript

  save() {

    // Points to the root reference
    var storageRef = firebase.storage().ref();

    // Points to 'images'
    var ref = storageRef.child('images');
    var file = document.getElementById('input').files[0];
    ref.put(file).then(function(snapshot) {
      console.log('Uploaded a blob or file!');
    });

---

另一种可能性如下：

<script>

  //....

  function handleFiles(files) {
    var file = files[0];

    var storageRef = firebase.storage().ref();

    // Points to 'images'
    var ref = storageRef.child('images');

    ref.put(file).then(function(snapshot) {
         console.log('Uploaded a blob or file!');
    })
    .catch(error => {
        alert(error.message);
    });
  }
</script>
//...
<input type="file" id="input" onchange="handleFiles(this.files)" />