如何将音频文件上传到Firebase存储？

Question

我想在我的Ionic2项目中上传音频文件到Firebase Storage。

首先，我使用Media插件（Cordova插件）录制了一个音频文件，并且这个文件可以正常播放。它来自于Android存储以及媒体插件方法（this.media.play()...;）。

其次，我需要将录制的文件推送到Firebase Storage。

以下是我的代码：

  let storageRef = firebase.storage().ref();
  let metadata = {
     contentType: 'audio/mp3',
   };
  let filePath = `${this.file.externalDataDirectory}`+`${this.fileName}`;
  const voiceRef = storageRef.child(`voices/${this.fileName}`);  
  var blob = new Blob([filePath], {type: 'audio/mp3'});
  voiceRef.put(blob);

看完Firebase的文档后，我可以将二进制大对象（blob）推送到Firebase。文件成功上传到Firebase Storage但是数据为空（95字节）。

这是截图：

- Khaled Ramadan

Answer 1

问题不是Firebase的问题。

我使用File cordova插件方法(readAsDataURL())和putString(fileBase64,firebase.storage.StringFormat.DATA_URL)方法来解决我的问题。

首先，我创建了一个文件引用： let filePath = "this.file.externalDataDirectory" + "this.fileName";

然后我使用readAsDataURL方法将文件转换为base64字符串，该方法返回一个包含文件的base64字符串的Promise。同时，我使用putString方法将文件推送到Firebase，它有两个参数：通过readAsDataURL返回的文件和firebase.storage.StringFormat.DATA_URL。

我的最终代码：

  let storageRef = firebase.storage().ref();
  let metadata = {
    contentType: 'audio/mp3',
  };
  let filePath = `${this.file.externalDataDirectory}` + `${this.fileName}`;
  this.file.readAsDataURL(this.file.externalDataDirectory, this.fileName).then((file) => {
    let voiceRef = storageRef.child(`voices/${this.fileName}`).putString(file, firebase.storage.StringFormat.DATA_URL);
    voiceRef.on(firebase.storage.TaskEvent.STATE_CHANGED, (snapshot) => {
      console.log("uploading");
    }, (e) => {
      reject(e);
      console.log(JSON.stringify(e, null, 2));
    }, () => {
      var downloadURL = voiceRef.snapshot.downloadURL;
      resolve(downloadURL);
    });
  });

对我来说运行良好。谢谢。

- Khaled Ramadan