一、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);
})
}

四、最终效果

微信小程序云开发-云存储-上传单个视频到云存储并显示到页面上的更多相关文章

  1. 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  2. Mac上微信小程序官方开发工具卡死的问题

    Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...

  3. 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑

    公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...

  4. 微信小程序快速开发

    微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...

  5. 【微信小程序】开发实战 之 「配置项」与「逻辑层」

    微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...

  6. BeautyWe.js 一套专注于微信小程序的开发范式

    摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo ...

  7. Django微信小程序后台开发教程

    本文链接:https://blog.csdn.net/qq_43467898/article/details/83187698Django微信小程序后台开发教程1 申请小程序,创建hello worl ...

  8. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  9. 微信小程序如何开发制作

    微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...

随机推荐

  1. pycham_编码格式设置,处理打印log乱码,处理读取配置文件报错

    一.打印日志乱码,处理设置如下: 二.配置文件读取方法因为gbk编码配置后需要同步修改 原报错信息:

  2. 【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)

    欢迎来到微软机器人编辑器使用教程,从这里开始,创建一个简单的机器人. 在该系列文章中,每一篇都将通过添加更多的功能来构建机器人.当完成教程中的全部内容后,你将成功的创建一个天气机器人(Weather ...

  3. 使用 Docker 部署 Node 应用 - 镜像文件尺寸的优化

    前面 使用 Docker 部署 Node 应用 一文中完成了镜像的创建和运行,不过生成的镜像还有些粗糙,需要进一步优化. 镜像的优化 通过 docker images 看到简单的一个 node 服务端 ...

  4. raft 图解 (秒懂)

    文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...

  5. 【Azure Redis 缓存】由Azure Redis是否可以自定义密码而引申出Azure PaaS的Redis服务是否可以和自建的Redis进行主从配置呢?

    问题描述 在自建的Redis服务中,可以通过 config set requirepass <Password> 设置Redis的登录密码,然后使用auth 命令输入密码.操作命令如下: ...

  6. 简单聊聊Ehcache缓存

    最近工作没有那么忙,有时间来写写东西.今年的系统分析师报名已经开始了,面对历年的真题,真的难以入笔,所以突然对未来充满了担忧,还是得抓紧时间学习技术. 同事推了一篇软文,看到了这个Ehcache,感觉 ...

  7. Golang封装一个加锁的Map工具包

    Golang封装一个加锁的Map工具包 直接上代码了,用的是读写锁,代码如下: package utils import ( "sync" ) type BeeMap struct ...

  8. 『心善渊』Selenium3.0基础 — 10、使用Seleniun定位页面元素归纳总结(超详细)

    目录 1.Selenium中8种基本元素定位方式 (1)单数形式 (2)复数形式 2.By类定位的8种定位方式 (1)单数形式 (2)复数形式 3.XPath定位总结 (1)基础定位语法 (2)属性定 ...

  9. Centos7搭建内网DNS服务器

      一.配置阿里云yum源 执行脚本配置阿里云的yum源,已配置yum源的可以忽略 #!/bin/bash # ******************************************** ...

  10. python3.6虚拟环境

    3.1.安装python3.6 [root@slavenode1 ~]# python -V Python 2.7.5 [root@slavenode1 ~]# yum install python3 ...