IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 微信小程序实现上传视屏并编辑 -> 正文阅读

[移动开发]微信小程序实现上传视屏并编辑

阅读说明:
本文是实现用户上传视频并可以在线播放,选择删除。视频上传到云存储,并在云数据库中添加记录。

下面包含: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) {
        // res.data 是包含以上定义的两条记录的数组
        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)
      }
    })

  }
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-05-05 11:29:58  更:2022-05-05 11:31:35 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 23:30:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码