一.序言

之前讲过Cordova结合Vue学习Camera，并讲述怎么通过Cordova来打包一个app，如果对Cordova和Vue不熟的同学，可以自行查阅相关资料，然后本文接着讲如何实习视频录取与文件上传，之后希望大家自己去实现音频录取与播放、

下面是大家需要了解的一些相关文档

cordova-plugin-media-capture----这个是Cordova媒体捕捉，主要使用其中capture.captureVideo(启动录像机应用程序)

cordova-plugin-file-transfer----这个是Cordova文件传输，主要使用其中的upload(文件传输上传)

二.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的时候让用户勾选存储权限，

这就是我在学习过程中遇到的问题和心得，还是那句话遇到问题多查询找资料。如果有什么疑问或者不清楚的可以加QQ：948585377联系我，我可以将我的demo发送给你，然后我们可以共同探讨学习。