上传视频到云存储
wx.chooseVideo(Object object)
1.选择要上传的视频
javascript"> //上传视频,第一步选择要上传的视频
chooseVideo(){
wx.chooseVideo({
camera:'back',//后置或前置摄像头
compressed: true,
maxDuration: 60,//视频最长的秒数
sourceType: ['album','camera'],//从相册选择视频或拍摄视频
}).then(res=>{
console.log(res.tempFilePath)
this.uploadVideo(res.tempFilePath)
}).catch(err=>{
console.error('选择视频失败',err)
})
}
2.和上传图片一样的上传步骤
javascript"> //第二步:直接上传视频到云存储
uploadVideo(temFile){
console.log('要上传视频的临时路径',temFile)
wx.cloud.uploadFile({
cloudPath:'一个简单的视频.mp4',//这个的命名是在云存储的命名
filePath:temFile,
})
.then(res=>{
console.log('上传成功',res)
})
.catch(err=>{
console.log('上传失败',err)
})
}
3.精简上传图片和视频的代码
javascript"> //第二步:直接上传图片或视频到云存储
uploadFile(temFile,fileName){
console.log('要上传图片的临时路径',temFile)
wx.cloud.uploadFile({
cloudPath:fileName,//这个的命名是在云存储的命名
filePath:temFile,
})
.then(res=>{
console.log('上传成功',res)
})
.catch(err=>{
console.log('上传失败',err)
})
}
javascript"> chooseImg(){
wx.chooseImage({
//上传图片第一步:选择你要上传的图片
count: 1,//可以选择的图片数量
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],//设置图片来源
})
.then(res=>{
console.log('选择成功',res)
this.uploadFile(res.tempFilePaths[0],'一张普通的照片.jpg')
})
.catch(err=>{
console.log('选择失败',err)
})
},
//上传视频,第一步选择要上传的视频
chooseVideo(){
wx.chooseVideo({
camera:'back',//后置或前置摄像头
compressed: true,
maxDuration: 60,//视频最长的秒数
sourceType: ['album','camera'],//从相册选择视频或拍摄视频
}).then(res=>{
console.log(res.tempFilePath)
this.uploadFile(res.tempFilePath,'一个视频.mp4')
}).catch(err=>{
console.error('选择视频失败',err)
})
}
官方给的二合一写法:
视频和图片的预览
1.修改wxml页面,设置图片/视频的动态显示
2.初始化showImg和showVideo的初始值
3.设置type 参数,区分上传的是图片还是视频
javascript"> //第二步:直接上传图片或视频到云存储
//type 1代表图片 ,2 代表视频
uploadFile(temFile, fileName, type) {
console.log('要上传图片的临时路径', temFile)
wx.cloud.uploadFile({
cloudPath: fileName, //这个的命名是在云存储的命名
filePath: temFile,
})
.then(res => {
console.log('上传成功', res)
if (type == 1) { //图片
this.setData({
imgUrl: res.fileID,
showImg: true, //显示图片
showVideo: false //隐藏视频
})
} else if (type == 2) { //视频
this.setData({
vedioUrl: res.fileID,
showImg: false, //隐藏图片
showVideo: true //显示视频
})
}
})
.catch(err => {
console.log('上传失败', err)
})
}
4.实现效果