更新记录
1.0.1(2020-09-25)
支持ios 以及安卓端原生断点上传协议tus
平台兼容性
Android
iOS
√
√
原生插件通用使用流程:
购买插件,选择该插件绑定的项目。
在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
开发完毕后正式云打包
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
(Android和iOS),tus 原生断点续传以及(android端原生视频选择器)插件,一个可续文件上传的开放协议,有完整示例
Wind-Tus 是一款支持android以及ios端的一个可续文件上传的开放协议tus 的原生插件库 详细请去官网查看(tus.io),或者去百度搜索相关资料,这是一个非常强大开放协议
支持多个端 ios android web 等,此插件还有一个强大的功能,继承了一个原生的视频选择器(目前只支持android端,ios端不支持请不要调用pick方法),比uniapp自带的选择器更加强大以及美观,一目了然。相当于购买此插件您将获取两大原生功能,视频选择器通过
dTus.pick({},(data)=>{console.log(data)}) 进行调用。
代码示例
const dTus = uni.requireNativePlugin('Wind-Tus');
import downloadItem from './downloadItem.vue'
//引入数据库操作类
import Db from './db.js';
export default {
components:{
downloadItem
},
data() {
return {
uploadList:[],//上传列表
statusText:"",//上传状态信息
maxUploadNum:1,//每次最大上传数量默认为1
curUpload:0,//当前正在上传的个数
};
},
onReady() {
this.queryAll().then(res=>{
//这里需要判断下本地数据库中是否有没有完成的任务如果有那么就重新开始上传
this.queneUpload()
}).catch(err=>{
console.log(err);
})
},
computed:{
taskList(){
return this.uploadList.sort((a,b)=>{
return a.progress -b.progress;
})
}
},
methods:{
pick(){
dTus.pick({
type:"video",
title:"选择视频",
camera:true,
maxCount:9
},(res)=>{
console.log("获取到的视频信息...",data);
});
},
queryAll(){
return new Promise((resolve,reject)=>{
//这里的话
//获取数据
Db.select('select * from video_upload',(data)=>{
console.log('uploadList....',data);
this.uploadList = data;
resolve(this.uploadList);
},(err)=>{
console.log(err);
resolve(false)
})
});
},
pause(){
dTus.pause();
},
resume(){
dTus.pause();
setTimeout(()=>{
dTus.resume();
},800);
},
del(path){
//先暂停然后再删除
dTus.pause();
setTimeout(()=>{
dTus.remove();
},1500)
//同时移除本地数据库中的数据
Db.deleteByPath(path,'video_upload',()=>{
let curTaskIndex = this.uploadList.findIndex((task, index, arr) => {
return task.path == path;
})
this.uploadList.splice(curTaskIndex,1);
});
},
queneUpload(){
//队列上传,目前基于插件机制只支持一次性上传一个视频,上传完成以后
let len = this.taskList.length;
if(len > 0){
for (let i=0;i
let task = this.taskList[i];
if(task.progress < 100){
if(this.curUpload <1){
//调用原生插件进行上传
dTus.hasTask((data)=>{
if(!data.hasTask){
this.upload({},task.path);
}
})
break;
}
}
}
}
},
upload(res,path){
dTus.init({
uploadUrl:"http://192.168.6.129:9090/files",
fileName:path ? path : plus.io.convertLocalFileSystemURL(res.tempFilePath),
chunkSize:1024
},(data)=>{
//successFn
console.log(data);
//上传成功以后设置progress为100
Db.update(data.taskid,'video_upload',{
field:"progress",
value:100
});
Db.update(data.taskid,'video_upload',{
field:"status",
value:"UploadSuccess"
});
this.curUpload = 0;
this.setStatusText(data.taskid,'status',data.status);
//上传完了以后还要继续处理
this.queneUpload();//队列上传....
},(data)=>{
console.log(data);
this.setStatusText(data.taskid,'status',data.status);
//progressFn
//主要是这个进度
if(data.code == 'progress'){
Db.update(data.taskid,'video_upload',{
field:"progress",
value:data.progress
});
this.setStatusText(data.taskid,'progress',data.progress+"%");
}
},(data)=>{
//cancleFn
console.log(data);
this.setStatusText(data.taskid,'status',data.status);
},(data)=>{
//errorFn
console.log(data);
this.setStatusText(data.taskid,'status',data.status);
},(data)=>{
//callbackFn
this.setStatusText(data.taskid,'status',data.status);
if(data.code == 'init'){
if(path){
//表示是队列上传
Db.updateByPath(path,'video_upload',{
field:"id",
value:data.taskid
});
//同事更新上传列表
this.setPathInfo(path,'id',data.taskid);
}else{
let nameArr = /(.*)\/(.*)/ig.exec(res.tempFilePath);
const insertData = {
id:data.taskid,
title:nameArr[2],
path:plus.io.convertLocalFileSystemURL(res.tempFilePath),
url:"",
cover:res.tempFilePath,
progress:0,
success:0,
status:""
};
this.insertInDb(insertData,true);
}
this.curUpload++
}
})
},
insertInDb(insertData,shift){
Db.select(`select * from video_upload where path='${insertData.path}'`,(item)=>{
//如果有数据就不添加到列表了
console.log('数据库中有么?',item.length);
if(item.length == 0){
Db.insert(insertData,'video_upload',(data)=>{
//插入成功以后 push到上传列表
if(shift){
this.uploadList.unshift(insertData);
}else{
this.uploadList.push(insertData);
}
})
}
},(err)=>{
console.log(err);
resolve(false)
})
},
setStatusText(taskid,prop,value){
if(this.uploadList.length == 0){
return;
}
let curTaskIndex = this.uploadList.findIndex((task, index, arr) => {
return task.id == taskid;
})
if(curTaskIndex == -1){
return;
}
this.uploadList[curTaskIndex][prop] = value;
},
setPathInfo(path,prop,value){
if(this.uploadList.length == 0){
return;
}
let curTaskIndex = this.uploadList.findIndex((task, index, arr) => {
return task.path == path;
})
if(curTaskIndex == -1){
return;
}
this.uploadList[curTaskIndex][prop] = value;
},
checkHasPath(path){
if(this.uploadList.length == 0){
return false;
}
let curTaskIndex = this.uploadList.findIndex((task, index, arr) => {
return task.path == path;
})
if(curTaskIndex != -1){
return true;
}
return false;
},
//选择video文件
startUpload(){
uni.chooseVideo({
count: 1,
compressed:false,
sourceType: [ 'album'],
success: (res) =>{
//这里判断后台进程中是否有上传任务
dTus.hasTask((data)=>{
if(data.hasTask){
//表示有任务所以直接写入sqlite数据库先,等上个任务完成以后再出发上传
//那么先放入uploadlist列表中
let nameArr = /(.*)\/(.*)/ig.exec(res.tempFilePath);
const insertData = {
id:Date.now(),//随机一个id
title:nameArr[2],
path:plus.io.convertLocalFileSystemURL(res.tempFilePath),
url:"",
cover:res.tempFilePath,
progress:0,
success:0,
status:"prepending"
};
if(!this.checkHasPath(insertData.path)){
console.log('正在新增上传列表...',insertData);
this.insertInDb(insertData,false);
}else{
uni.showToast({
title:"该任务已在上传列表中!请重新选择!",
icon:"none"
});
}
}else{
console.log('start upload...');
//开始上传
this.upload(res);
}
})
}
});
}
}
}
所需权限
[========]
联系作者
请发邮箱 924462390@qq.com 联系我,平时很忙,所以遇到问题请写明bug的信息,以及截图