阅读说明: 本文是实现用户上传视频并可以在线播放,选择删除。视频上传到云存储,并在云数据库中添加记录。
下面包含:1效果截图及截图说明,2实现步骤及源码。 1:效果截图及截图说明: 1.1初次进入页面看到的视图如下: 1.2点击上传视频并上传视频完成后,点击刷新视频信息,看见的试图如下: (可以选择视频并能播放,视频太大可能会黑屏)
2:实现步骤: 2.1创建页面: 1:app.json中代码如下:
"pages/mi6_file/file"
2:file.wxml代码:
<button size="mini" type="primary" bindtap="getMessage">刷新视频信息</button>
<button bindtap="onloadvid">上传视频</button>
<block wx:for="{{ vidInfo}}" wx:key="_id">
<video src="{{item.vid}}" custom-cache="{{false}}" ></video>
</block>
3:file.js代码: 注意:代码运行前需要现在云数据库中创建数据表mi6vids:
const app = getApp()
const db = wx.cloud.database();
const vids = db.collection('mi6vids')
Page({
data:{
vidUr:[],
fileUr:[],
},
getMessage: function () {
var that=this;
vids.where({
_openid: 'oOEbV5MrSxVEOyx4SSC0G-LmoYSQ',
}) .get({
success: function(res) {
console.log(res.data),
that.setData({
vidInfo:res.data,
})
}
})
},
onloadvid(){
console.log("video choose !"),
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
console.log("video choose success!!",res.tempFilePath)
wx.cloud.uploadFile({
cloudPath: 'MI6/'+new Date().getTime()+'.mp4',
filePath:res.tempFilePath,
success:res =>{
console.log('上传vid成功', res)
vids.add({
data:{
vid:res.fileID,
}
})
},
fail: console.error
})
},
fail(res){console.log("fail to upload",res)}
})
},
})
代码结束:小说明,上传的视屏太大,在播放的时候可能会黑频。
补充:如果需要单个实现视频删除,就添加如下代码:
<button bindtap="delvid" data-apply="{{item._id}}">删除上方视频</button>
delvid(op){
let apply = op.currentTarget.dataset.apply
console.log()
vids.doc(apply).remove({
success:res=>{
console.log('删除图片成功')
setTimeout(()=>{
wx.switchTab({
url: '../index/index',
})
}, 1000)
}
})
}
|