1 云开发控制台管理文件

小程序储存数据到云服务器 小程序 云存储_文件上传


点击资源文件夹 就可以看到里面的内容了

小程序储存数据到云服务器 小程序 云存储_html_02


点击各个文件都会有下载地址,如果是图片可以直接预览,其他文件则需要地址了

小程序储存数据到云服务器 小程序 云存储_上传_03

2 上传图片到云存储

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

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

小程序储存数据到云服务器 小程序 云存储_html_04

小程序储存数据到云服务器 小程序 云存储_上传_05

小程序储存数据到云服务器 小程序 云存储_小程序储存数据到云服务器_06


小程序储存数据到云服务器 小程序 云存储_html_07


这样设置好,就可以选择图片或者拍照了

然后就可以设置上传了

官方文档:

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

小程序储存数据到云服务器 小程序 云存储_小程序储存数据到云服务器_08


调用文件上传api接口

小程序储存数据到云服务器 小程序 云存储_上传_09


图片名称建议使用随机生成,要不然会无限覆盖

也可以不用这麻烦的,直接使用箭头函数就好了,直接使用this即可使用上传即可了

小程序储存数据到云服务器 小程序 云存储_小程序_10

小程序储存数据到云服务器 小程序 云存储_小程序_11


打印出上传成功即可了返回的值中fileID就是图片地址了

小程序储存数据到云服务器 小程序 云存储_小程序储存数据到云服务器_12

查看云储存,则看见我们刚上传的图片

小程序储存数据到云服务器 小程序 云存储_小程序_13

3 上传视频到云存储

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

官方文档:

https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html

小程序储存数据到云服务器 小程序 云存储_上传_14

小程序储存数据到云服务器 小程序 云存储_html_15


这么使用就可以调用视频功能了

小程序储存数据到云服务器 小程序 云存储_小程序储存数据到云服务器_16


小程序储存数据到云服务器 小程序 云存储_小程序_17


调用文件上传接口↑

小程序储存数据到云服务器 小程序 云存储_上传_18


上传成功了

小程序储存数据到云服务器 小程序 云存储_小程序储存数据到云服务器_19

封装公用

小程序储存数据到云服务器 小程序 云存储_上传_20

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

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

小程序储存数据到云服务器 小程序 云存储_上传_21


type值很重要 可以选择我们上传文件格式

小程序储存数据到云服务器 小程序 云存储_小程序_22


小程序储存数据到云服务器 小程序 云存储_小程序_23


上面图片和文件上传也可以使用,只要对应上type值就好了(选择all时所有类型文件都可上传哦)

后面上传步骤都一样啦,参考上面↑↑↑后续上传步骤