Cordova结合Vue学习视频录取与上传
2018-02-01 本文已影响76人
逆行世界
一.序言
之前讲过Cordova结合Vue学习Camera，并讲述怎么通过Cordova来打包一个app，如果对Cordova和Vue不熟的同学，可以自行查阅相关资料，然后本文接着讲如何实习视频录取与文件上传，之后希望大家自己去实现音频录取与播放、
下面是大家需要了解的一些相关文档
cordova-plugin-media-capture----这个是Cordova媒体捕捉，主要使用其中capture.captureVideo（启动录像机应用程序）
cordova-plugin-file-transfer----这个是Cordova文件传输，主要使用其中的upload（文件传输上传）
此文中将不再讲述如何打包app，想了解可以查看Cordova结合Vue学习Camera
二.app项目中安装plugin-media-capture与plugin-file-transfer插件api
首先进入你的app项目然后调用cmd命令行工具，分别执行命令
cordova plugin add cordova-plugin-media-capture
cordova plugin add cordova-plugin-file-transfer
三.Vue中使用插件
以下代码则是调用摄像机进行录制，当成功时则会调用onSuccess方法并返回文件对象
//开始录制视频
videoCapture: function() {
var options = {
imit: 1,
duration: 10
};
navigator.device.capture.captureVideo(this.onSuccess, this.onError, options);
},
onSuccess: function(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
this.path = mediaFiles[i].fullPath;
// do something interesting with the file
}
alert(this.path);
},
以上都能成功时我们就可以上传文件了，以下代码是上传视频文件。
uploadHandle: function() {
//这里这段后期测试发现没有用
if(device.platform == "iOS") {
var src = cordova.file.tempDirectory + +Date.now()+ ".m4a";
} else if(device.platform == "Android") {
var src = cordova.file.externalRootDirectory + +Date.now()+ ".m4a";
}
//判断是否有文件被上传
if (!this.path) {
Toast({
message: '文件不存在',
position: 'bottom',
duration: 5000
});
return false;
}
var fileURL = this.path;
//上传成功的回调方法
var win = function(r) {
console.info(r);
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
//上传失败的回调方法
var fail = function(error) {
console.info(error);
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
//上传参数
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "text/plain";
var params = {
value1: 'test',
value2: 'param'
};
options.params = params;
//实例化上传类
var ft = new FileTransfer();
console.info(ft);
//绑定上传进度函数
ft.onprogress = this.selectload;
//开始上传
ft.upload(fileURL, encodeURI('http://192.168.1.23:8087'), win, fail,options);
},
//绑定显示上传进度
selectload:function(e){
if (e.lengthComputable) {
// this.sheetVisible=true;
var num=(e.loaded / e.total)*100;
this.load_val=num.toFixed(2);
console.log(this.load_val);
console.log('当前进度：' + e.loaded / e.total);
}
}
四.最后会出现的问题与bug
- 第一个就是文件获取但是并没有上传成功，首先你要注意服务端对上传文件的大小限制
- 第二个就是上传文件一定要授权手机存储权限，这一点非常重要，没有存储权限就等于拿不到刚才录制的文件，自然也就上传不了，可以再安装apk的时候让用户勾选存储权限，
