微信小程序云开发——

在微信小程序的云开发平台中有一个云存储，这里可以存放它图片、音频、视频等资源，甚至还可以存储静态网页，需要使用的时候可以直接调用。

有关于云存储的安全规则可以查看官方文档：云存储安全规则 | 微信开放文档 (qq.com)

上传是需要先选择文件然后再调用上传API进行上传，但是微信小程序原本选择照片和视频的API现已经停止了维护，分别是wx.chooseImage和wx.chooseVideo。

所以最好使用微信开发文档所说的使用wx.chooseMedia来代替这两个API

wx.chooseMedia(Object object) | 微信开放文档 (qq.com)官方文档：wx.chooseMedia(Object object) | 微信开放文档 (qq.com)

使用wx.cloud.uploadFile上传到云存储中

咱们废话不多说，直接上代码！！

js代码段：

Page({getlist(){wx.cloud.database().collection('goods').get().then(res=>{console.log('1',res.data)wx.stopPullDownRefresh() //结束刷新动画this.setData({list:res.data})}).catch(err=>{console.log('0',err)})wx.cloud.database().collection('videos').get().then(res=>{console.log('2',res.data)wx.stopPullDownRefresh() //结束刷新动画this.setData({videolist:res.data})}).catch(err=>{console.log('0',err)})},onLoad(){wx.startPullDownRefresh()  //启动刷新页面this.getlist()},choose(){const that = thiswx.chooseMedia({count: 9,mediaType: ['image','video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res) {console.log(res.tempFiles)console.log(res)if(res.type == "video"){let src = res.tempFiles[0].tempFilePath.split('tmp/')[1]console.log(src)wx.cloud.uploadFile({cloudPath: 'myImage/' + new Date().getTime() + "_" +  Math.floor(Math.random()*1000) + src,filePath: res.tempFiles[0].tempFilePath, // 文件路径(时间戳)}).then(res => {that.setData({videourl:res.fileID})console.log(that.data.videourl)wx.cloud.database().collection('videos').add({data:{videofileID:that.data.videourl}}).then(res=>{console.log('视频地址成功存放到数据库',res)}).catch(err=>{console.log('视频地址失败存放到数据库',err)})}).catch(error => {console.log('上传失败',error)})}else{res.tempFiles.forEach(function(item){console.log(item)const path = item.tempFilePathlet src = item.tempFilePath.split('tmp/')[1]console.log(src)wx.cloud.uploadFile({cloudPath: 'myImage/' + new Date().getTime() + "_" +  Math.floor(Math.random()*1000) + src,filePath: path, // 文件路径(时间戳)}).then(res => {console.log('上传成功',res.fileID)wx.cloud.database().collection('goods').add({data:{fileID:res.fileID}}).then(res=>{console.log('添加成功',res)}).catch(err=>{console.log('添加失败',err)})}).catch(error => {console.log('上传失败',error)})})}}})},//   监听用户下拉事件onPullDownRefresh:function(){console.log('下拉事件监听')// 自带刷新动画this.getlist()}
})

创建两个运输库分别存储上传的image和video不同的id

wxml：

   <view class="first" ><view wx:for="{{list}}" wx:key="index" ><image src="{{item.fileID}}"></image></view></view><view wx:for="{{videolist}}" wx:key="index"><video src="{{item.videofileID}}"></video></view>
<button bindtap="choose" type="primary">上传</button>

wxss

image{width: 360rpx;height: 350rpx;
}
video{width: 100%;height: 500rpx;
}
.first{display: flex;
}

文件的上传及下载

wx.chooseMessageFile官方文档：wx.chooseMessageFile | 微信开放文档 (qq.com)

wx.cloud.downloadFile官方文档：wx.cloud.downloadFile | 微信开放文档 (qq.com)

在微信开发者工具中编译上传文件会在本地端选择文件，在真机中则是从客户端选择文件进行上传，调用wx.cloud.downloadFile下载文件后，文件会自动打开。word,excel,ptf等都可以上传。

js：

Page({chooseFlie(){wx.chooseMessageFile({count: 1,type: 'all',success (res) {console.log(res)// tempFilePath可以作为 img 标签的 src 属性显示图片const tempFilePaths = res.tempFilesconsole.log(res.tempFiles[0].path)console.log(res.tempFiles[0].name)wx.cloud.uploadFile({cloudPath:res.tempFiles[0].name,filePath:res.tempFiles[0].path}).then(res=>{console.log('上传成功',res)}).catch(err=>{console.log('上传失败',err)})}})},// 获取用户输入的下载链接getContent(e){console.log(e.detail.value)this.setData({fileId:e.detail.value})},// 下载文件downloadFile(){let fileId = this.data.fileIdconsole.log('下载链接',fileId)if(fileId != null && fileId.length > 0){wx.cloud.downloadFile({fileID:fileId}).then(res=>{console.log('下载成功',res)wx.openDocument({filePath: res.tempFilePath,success: function (res) {console.log('打开文档成功',res)}})}).catch(err=>{console.log('下载失败',err)wx.showToast({icon:'error',title: '输入的链接有误',})})}else{wx.showToast({icon:'none',title: '下载链接为空',})}}
})

ml：

<button bindtap="chooseFlie" type="primary">选择文件</button>
请输入下载链接
<input bindinput="getContent"></input>
<button bindtap="downloadFile" type="primary">点击下载</button>

css：

input{border: 1px solid black;
}

执行效果：

控制台打印出的文件链接即为下载文件的地址

点击下载后，文档下载完成会自动打开

微信小程序云开发———云存储相关推荐

微信小程序6-云开发-云数据库
微信小程序1-小程序基础,开发工具安装使用微信小程序2-WXSS,WXS 微信小程序3-小程序生命周期和组件微信小程序4-小程序的api 微信小程序5-真机测试 1.云开发 1).什么是云开发微 ...
【微信小程序-原生开发+云开发+TDesign】修改用户头像（含wx.chooseMedia，wx.cloud.uploadFile，wx.cloud.deleteFile的使用）
效果预览核心技术(含业务逻辑) 选择新头像(本地图片) 使用 wx.chooseMedia 选择本地图片,官网见 https://developers.weixin.qq.com/miniprogr ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
仿京细菜谱微信小程序源码云开发菜谱微信小程序源码
京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程让您轻松学会做美食.对不同食材和地域的饮食做了不同的分类和详细的做菜方法分类十分详细 ...
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
微信小程序：uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错该小程序还有外卖系 ...
微信小程序中配置云开发
微信小程序中配置云开发一.配置 app.js 文件 onLaunch() {wx.cloud.init({env: 'cloud1-xxxxxxxxxx', // 云开发环境IDtraceUser ...
微信小程序：(更新)云开发微群人脉
大家好,今天给大家带来的这一款是经过优化更新并有所改动的一个版本我们之前也发布过一款,今天这一款是在之前的哪一款的基础下增加优化该小程序的群码都是系统自动采集的,所以没有上线但是没有群的烦恼另外 ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...

微信小程序云开发———云存储

微信小程序云开发———云存储相关推荐

最新文章

热门文章