使用cordovaFileTransfer将视频上传到Firebase（3.0）存储 [英] Uploading video to firebase (3.0) storage using cordovaFileTransfer

问题描述

Am使用Ionic，（ng）Cordova和Firebase存储来创建混合应用程序。

以前，将Cordova媒体捕获（例如，用于捕获视频）和cordova文件配对传输（用于将其上传到某处）的工作方式类似于这个问题指出。

我正在努力研究如何通过新的Firebase Storage上传过程实现相同的目的，但这并没有使用服务器地址：

  var uploadTask = storageRef.child（'videos /'+ file.name）.put（file） ; 
  

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

我可能会遗漏一些非常明显的东西-如果是这样，则致歉并表示感谢。

解决方案

对，我终于可以正常工作了。

如果要使用您此处所述的新的Firebase存储上传方法，您不再希望使用Cordova FileTransfer插件（为您做了一些肮脏的工作）。

您现在需要使用（ng）Cordova File插件首先读取文件。根据您的文件，您应该以最合适的方式阅读-因为我

一旦尝试读取视频，我将其读取为数组缓冲区。您需要将其转换为blob（观看语法），然后上传将顺利运行：

  var file_path = root / to / directory; 
 var name = filename.mp4; 
 
 $ cordovaFile.readAsArrayBuffer（file_path，name）
 .then（function（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）{
 //观察状态变化事件，例如进度，暂停，并恢复
 // //参见以下详细信息
 
 var progress =（snapshot.bytesTransferred / snapshot.totalBytes）* 100; 
 console.log（'上传为'+进度+'％done'）; 
 
}，function（error）{
 //处理上传失败的
 console.log（上传错误： +错误）
}，function（）{
 //处理完整的
上的成功上传//例如，获取下载URL：https：/ /firebasestorage.googleapis.com / ... 
 var downloadURL = uploadTask.snapshot.downloadURL; 
 console.log（ Success！，downloadURL）; 
}）； 
 
}，函数（错误）{
 //错误
 console.log（无法从目录中读取视频文件，error.code）; 
 
} 
 
）; 
  

NB：1）这是指网络/ JavaScript API-Android和iOS API会有所不同2）请记住，文件类型可能会因设备而异，因此您需要处理此问题3）我正在使用ngCordova，但对于常规cordova / phonegap插件也是如此。 / p>

希望您会对此有所帮助。

Am creating a hybrid app using Ionic, (ng)Cordova and Firebase storage.

Previously, pairing Cordova media capture (e.g. for capturing a video) and cordova file transfer (for uploading it somewhere) worked something like this question states.

I'm struggling to work out how to achieve the same thing with the new Firebase Storage upload process, which doesn't use a server address:

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

I get the feeling that I now need to add another step for actually accessing the file from the device - this was previously handled by the file transfer plugin.

I may be missing something very obvious - if so, apologes and thanks.

解决方案

Right, I finally got this working.

If you want to use the new firebase storage upload method described here you no longer want to use the Cordova FileTransfer plugin (which did some of the dirty work for you).

You now need to read the file first, using the (ng)Cordova File plugin. Depending on your file you should read it in the most appropriate way- in my case, because I was trying to read a video, I read it as an arraybuffer.

Once read, you need to convert it to a blob (watch the syntax), and then the upload will run smoothly:

  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);

                      }

                      );

NB: 1) This refers to the web/javascript API - android and iOS APIs will be different. 2) Remember the file type may vary by device, so you need to handle this 3) I am using ngCordova, but the same applies to the regular cordova/phonegap plugin.

Hope you find this helpful.

这篇关于使用cordovaFileTransfer将视频上传到Firebase（3.0）存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！