一、wxml文件
<!-- 上传视频到云存储 --> <button bindtap="chooseVideo" type="primary" class="uploadImg">上传单个视频</button> <view class="myImage"> <video src="{{videoUrl}}"></video> </view>
二、wxss文件
.myImage{ margin: 30rpx auto; text-align: center; } image{ width: 420rpx; height: 300rpx; } .uploadImg{ margin: 30rpx; }
三、js文件
在page页面内写代码
//第一步:选择要上传的视频 chooseVideo(){ let that = this wx.chooseVideo({ sourceType: [\'album\',\'camera\'], maxDuration: 60, camera: \'back\', success(res) { //console.log(res.tempFilePath); console.log("----------",res.tempFilePath); wx.showLoading({ title: \'上传中\', }) //调用uploadImg(tempFile)函数,实现图片上传功能 that.uploadVideo(res.tempFilePath) } }) }, //第二步:上传所选视频到云存储 uploadVideo(tempFile){ console.log("要上传视频的临时路径",tempFile) let timestamp = (new Date()).valueOf() wx.cloud.uploadFile({ cloudPath: +timestamp+\'.mp4\', //云存储的路径,开发者自定义 filePath: tempFile, // 文件路径 }).then(res => { console.log("上传成功",res) wx.showToast({ title: \'上传成功\', icon:"success", duration:2000 }) let that = this setTimeout(function(){ that.setData({ videoUrl: res.fileID }) },2000) }) .catch(err => { console.log("上传失败",err); }) }
四、最终效果