微信小程序云开发-云存储-上传单个视频到云存储并显示到页面上
一、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);
})
}
四、最终效果
微信小程序云开发-云存储-上传单个视频到云存储并显示到页面上的更多相关文章
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- Mac上微信小程序官方开发工具卡死的问题
Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Applicati ...
- 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑
公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...
- 微信小程序快速开发
微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...
- 【微信小程序】开发实战 之 「配置项」与「逻辑层」
微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...
- BeautyWe.js 一套专注于微信小程序的开发范式
摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo ...
- Django微信小程序后台开发教程
本文链接:https://blog.csdn.net/qq_43467898/article/details/83187698Django微信小程序后台开发教程1 申请小程序,创建hello worl ...
- vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录
一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
- 微信小程序如何开发制作
微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...
随机推荐
- Linux 2 的 Windows 子系统上发布 CUDA
Linux 2 的 Windows 子系统上发布 CUDA 为响应大众需求,微软 宣布 在 2020 年 5 月的 建造 大会上推出了 建造 ( WSL 2 ) – GPU 加速功能.这一特性为许多计 ...
- Github_远程仓库多人协作操作,解决冲突
前提:假设原已有一个代码仓库,加入协作者,大家一起完成一个项目. 一.添加伙伴-->伙伴同意加入-->伙伴clone,提交代码 1.创建者进入仓库主页 ==> Settings页面 ...
- 【题解】【洛谷 P1967】 货车运输
目录 洛谷 P1967 货车运输 原题 题解 思路 代码 洛谷 P1967 货车运输 原题 题面请查看洛谷 P1967 货车运输. 题解 思路 根据题面,假设我们有一个普通的图: 作图工具:Graph ...
- Redis--狂神说Redis基础汇总(完结)
Redis--狂神说Redis基础汇总(完结) 2021.6.12-2021.6.14:端午学学玩玩弄完了Redis基础的汇总,越学越觉得自己知识量的匮乏. 参考链接:狂神说Java--Redis汇总 ...
- Redisson 分布式锁实现之前置篇 → Redis 的发布/订阅 与 Lua
开心一刻 我找了个女朋友,挺丑的那一种,她也知道自己丑,平常都不好意思和我一块出门 昨晚,我带她逛超市,听到有两个人在我们背后小声嘀咕:"看咱前面,想不到这么丑都有人要." 女朋友 ...
- Java第一次博客作业
第一次博客作业 目录 三次作业题目详情 作业中的错误分析 感想与心得 题目详情 题目1:第一次作业: 类图: 题目2 类图: 题目3 类图: 题目4 题目5 题目6 类图: 题目7 类图: 题目8 第 ...
- vue给元素动态绑定样式
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data () ...
- Linux添加永久静态路由
1.首先查看一下本机的路由 route -n 2.比如我们添加两条静态路由,访问192.168.142.100时通过192.168.142.10:访问192.168.142.200时通过192.168 ...
- 解决Git操作报错
情况一: 当我拉取的代码是最新的时候,git pull是可以正常的拉取的,但是却不可以提交,报错如下图: 情况二: 如果我目前不是最新的版本,需要git pull,此时拉取就会失败,报错如下图: 出现 ...
- 97、配置yum源仓库服务器
(服务端(双(外,内)网卡)--客户端(内网)) YUM主要用于自动安装.升级rpm软件包,它能自动查找并解决rpm包之间的依赖关系.要成功的使用YUM工具安装更新软件或系统, 就需要有一个包含各种r ...