使用cordovaFileTransfer将视频上传到firebase(3.0)存储

时间:2016-07-18 14:59:15

标签: cordova-plugins firebase-storage

使用Ionic,(ng)Cordova和Firebase存储创建混合应用程序。

以前,配对Cordova媒体捕获(例如用于捕获视频)和cordova文件传输(用于上传某个地方)的工作类似于this question个州。

我正在努力研究如何使用新的Firebase存储上传流程来实现同样的目标,该流程不使用服务器地址:

var uploadTask = storageRef.child('videos/' + file.name).put(file);

我觉得我现在需要为设备实际访问文件添加另一个步骤 - 这是以前由文件传输插件处理的。

我可能会遗漏一些非常明显的东西 - 如果是这样的话,抱歉和谢谢。

1 个答案:

答案 0 :(得分:5)

是的,我终于有了这个工作。

如果您想使用here所述的新firebase存储上传方法,您不再需要使用Cordova FileTransfer插件(它为您完成了一些肮脏的工作)。

现在需要先使用(ng)Cordova File插件读取文件。根据您的文件,您应该以最合适的方式read it - 在我的情况下,因为我试图阅读视频,我将其视为数组缓冲区。

一旦阅读,您需要将其转换为blob(观察语法),然后上传将顺利运行:

  var file_path = "root/to/directory";
  var name = "filename.mp4";

                $cordovaFile.readAsArrayBuffer(file_path, name)
                    .then(function (success) {
                        // success
                        console.log(success);

                      blob = new Blob([success], {type: "video/mp4"});

                      console.log(blob);

                      var uploadTask = storageRef.child(name).put(blob);

                      uploadTask.on('state_changed', function(snapshot){
                        // Observe state change events such as progress, pause, and resume
                        // See below for more detail

                          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                          console.log('Upload is ' + progress + '% done'); 

                      }, function(error) {
                        // Handle unsuccessful uploads
                        console.log("Error uploading: " + error)
                      }, function() {
                        // Handle successful uploads on complete
                        // For instance, get the download URL: https://firebasestorage.googleapis.com/...
                        var downloadURL = uploadTask.snapshot.downloadURL;
                        console.log("Success!", downloadURL);
                      });

                      }, function (error) {
                        // error
                        console.log("Failed to read video file from directory, error.code);

                      }

                      );

注意:1)这是指web / javascript API - android和iOS API会有所不同。 2)请记住,文件类型可能因设备而异,因此您需要处理此问题3)我使用的是ngCordova,但这同样适用于常规的cordova / phonegap插件。

希望您觉得这很有帮助。