使用 cordovaFileTransfer 将视频上传到 firebase (3.0) 存储
Uploading video to firebase (3.0) storage using cordovaFileTransfer
我正在使用 Ionic、(ng)Cordova 和 Firebase 存储创建混合应用程序。
以前,将 Cordova 媒体捕获(例如用于捕获视频)和 Cordova 文件传输(用于将其上传到某处)配对工作类似于 状态。
我正在努力研究如何使用不使用服务器地址的新 Firebase 存储上传过程实现相同的目的:
var uploadTask = storageRef.child('videos/' + file.name).put(file);
我觉得我现在需要添加另一个步骤来实际从设备访问文件 - 这以前由文件传输插件处理。
我可能遗漏了一些非常明显的东西 - 如果是这样,我们深表歉意并表示感谢。
好的,我终于搞定了。
如果您想使用 here 中描述的新的 firebase 存储上传方法,您不想再使用 Cordova FileTransfer 插件(它为您完成了一些肮脏的工作)。
您现在需要先使用 (ng)Cordova 文件插件读取文件。根据您的文件,您应该以最合适的方式 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/javascriptAPI-android和iOSAPI会有所不同。 2) 请记住文件类型可能因设备而异,因此您需要处理这个 3) 我使用的是 ngCordova,但这同样适用于常规 cordova/phonegap 插件。
希望这对您有所帮助。
我正在使用 Ionic、(ng)Cordova 和 Firebase 存储创建混合应用程序。
以前,将 Cordova 媒体捕获(例如用于捕获视频)和 Cordova 文件传输(用于将其上传到某处)配对工作类似于
我正在努力研究如何使用不使用服务器地址的新 Firebase 存储上传过程实现相同的目的:
var uploadTask = storageRef.child('videos/' + file.name).put(file);
我觉得我现在需要添加另一个步骤来实际从设备访问文件 - 这以前由文件传输插件处理。
我可能遗漏了一些非常明显的东西 - 如果是这样,我们深表歉意并表示感谢。
好的,我终于搞定了。
如果您想使用 here 中描述的新的 firebase 存储上传方法,您不想再使用 Cordova FileTransfer 插件(它为您完成了一些肮脏的工作)。
您现在需要先使用 (ng)Cordova 文件插件读取文件。根据您的文件,您应该以最合适的方式 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/javascriptAPI-android和iOSAPI会有所不同。 2) 请记住文件类型可能因设备而异,因此您需要处理这个 3) 我使用的是 ngCordova,但这同样适用于常规 cordova/phonegap 插件。
希望这对您有所帮助。