小程序云开发-云存储

1 云开发控制台管理文件

小程序云开发-云存储_第1张图片
点击资源文件夹 就可以看到里面的内容了
小程序云开发-云存储_第2张图片
点击各个文件都会有下载地址,如果是图片可以直接预览,其他文件则需要地址了
小程序云开发-云存储_第3张图片

2 上传图片到云存储

在上传图片前我们需选择图片,所以用到一个选择图片功能

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

小程序云开发-云存储_第4张图片

小程序云开发-云存储_第5张图片

在这里插入图片描述
小程序云开发-云存储_第6张图片
这样设置好,就可以选择图片或者拍照了

然后就可以设置上传了

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html
小程序云开发-云存储_第7张图片
调用文件上传api接口

小程序云开发-云存储_第8张图片
图片名称建议使用随机生成,要不然会无限覆盖
也可以不用这麻烦的,直接使用箭头函数就好了,直接使用this即可

使用上传即可了
小程序云开发-云存储_第9张图片

在这里插入图片描述
打印出上传成功即可了

返回的值中fileID就是图片地址了
小程序云开发-云存储_第10张图片

查看云储存,则看见我们刚上传的图片
小程序云开发-云存储_第11张图片

3 上传视频到云存储

在上传视频前我们需选择视频,所以用到一个选择视频功能

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
小程序云开发-云存储_第12张图片

小程序云开发-云存储_第13张图片
这么使用就可以调用视频功能了
在这里插入图片描述
小程序云开发-云存储_第14张图片
调用文件上传接口↑
小程序云开发-云存储_第15张图片
上传成功了
在这里插入图片描述

封装公用
小程序云开发-云存储_第16张图片

4 上传word、Excel、pdf文件等到云储存

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

小程序云开发-云存储_第17张图片
type值很重要 可以选择我们上传文件格式
小程序云开发-云存储_第18张图片
小程序云开发-云存储_第19张图片
上面图片和文件上传也可以使用,只要对应上type值就好了(选择all时所有类型文件都可上传哦)
后面上传步骤都一样啦,参考上面↑↑↑后续上传步骤

你可能感兴趣的:(小程序,小程序)