微信小程序云开发：上传图片、视频到云存储指定目录并渲染到页面上

该文章功能为主，样式为次

页面展示：

前期准备：在云开发控制台的云存储环境中创建新建img文件夹和video文件夹

.wxml

<button bindtap="chooseImg">选择图片</button>
<button bindtap="chooseVideo">选择视频</button>
<image wx:if="{{showImg}}" src="{{imgUrl}}"></image>
<video wx:if="{{showVideo}}" src="{{videoUrl}}"></video>

.js

Page({data:{showImg:false,showVideo:false},chooseImg() {//选择图片第一步：选择你要上传的图片wx.chooseImage({count: 1, //可以选择多少张图片sizeType: ['original', 'compressed'], //所选的图片的尺寸sourceType: ['album', 'camera'], //选择图片的来源success: res => {console.log(res.tempFilePaths)this.uploadFile(res.tempFilePaths[0],'img/'+'图片.jpg',1) //图片放在云存储里的img文件夹下}})},// 上传第二步：直接上传到云存储// type 1 代表图片 type 2 代表视频uploadFile(tempFile,fileName,type) {console.log("要上传文件的临时路径", tempFile)wx.cloud.uploadFile({ //将本地资源上传至云存储空间cloudPath: fileName, //云存储路径filePath: tempFile //要上传文件资源的路径}).then(res => {console.log('上传成功', res) //res里面有我们向要的图片或视频路径if (type ==1){ //图片this.setData({imgUrl:res.fileID,showImg:true,//显示图片showVideo:false//隐藏视频})}else if(type == 2 ){//视频this.setData({videoUrl:res.fileID,showImg:false,//隐藏图片showVideo:true//显示视频})}}).catch(err => {console.log('上传失败', err)})},// 上传视频chooseVideo(){wx.chooseVideo({sourceType: ['album','camera'], //从相册选择视频或者拍摄视频maxDuration: 60, //视频时长camera: 'back',success : res=> {console.log(res.tempFilePath)this.uploadFile(res.tempFilePath,'video/'+'测试视频.mp4',2)}})}})

微信小程序云开发：上传图片、视频到云存储指定目录并渲染到页面上相关推荐

微信小程序快速开发：视频指导版
<微信小程序快速开发:视频指导版>是2017年5月由人民邮电出版社出版的图书,作者是易伟.本书根据微信小程序的内容,全面系统地介绍了微信小程序的搭建和开发.本书主要内容有小程序注册.编程基 ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
微信小程序：修复采集接口版云开发表情包
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...
微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
微信小程序如何上传音视频到百度云Bos cloud BCE
在做了一系列调查之后,目前为止暂未发现有相关的文章,在此简单记录一下解决此问题的步骤,造福来人. 本人的解决方案参考了百度云BOS官方文档,地址如下: https://cloud.baidu.com/ ...
云开发（微信-小程序）笔记（五）----云函数，就这（上）
云开发(微信-小程序)笔记(四)---- 还有吗?再来点云函数云函数即在云端(服务器端)运行的函数.在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源:各云函数完全独立 ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...
微信小程序应用开发赛作品综合开发记录——晋鹿文旅（云开发——概览）
文章目录前言作品展示: 1.设计理念: 2.1.风景/人文历史 2.2.文物园 2.3.志愿者(暂未对接任何活动,仅测试) 2.4.英汉传译(考虑到可能在旅行中外国友人或者单纯就想翻译) 2.5. ...

微信小程序云开发：上传图片、视频到云存储指定目录并渲染到页面上

该文章功能为主，样式为次

页面展示：

前期准备：在云开发控制台的云存储环境中创建新建img文件夹和video文件夹

微信小程序云开发：上传图片、视频到云存储指定目录并渲染到页面上相关推荐

最新文章

热门文章