简单了解了云函数的基本功能的使用之后,可以开始云存储了。操作后端的都知道,上传一张图片到数据库,需要进行二进制转码后再存储,或者将图片上传至服务器,数据库里存图片的地址,比较麻烦,而音视频和文档类文件就更麻烦了。而小程序云存储比较简单,首先可以手动在可视化界面添加,其次,即使用代码添加也比较容易。
云存储手动可视化添加很简单,只需要如图点击上传文件或者直接将桌面文件拖拽进界面即可:
上传文件后点击文件会显示文件的详细信息,可以首先进行预览,值得注意的是,下载地址可以在网页中对文件进行访问,地址后面的参数sign会使文件访问过期,如果想永久访问文件,直接在输入地址时去掉参数sign即可,而File ID则是仅用于微信小程序当中的图片访问地址,网页无法访问。
然后这里演示一下如何上传图片到云存储中,首先是本地上传,调用小程序中的方法,代码如下:这样上传的图片与直接手动上传的一样,注意本地选择图片后生成的tempFilePaths是临时路径,只有用于上传操作,直接放在网页也是无法访问的。
更加便利的是,无论是上传视频还是pdf等其他文件,云存储的操作函数都是wx.cloud.uploadFile,参数也几乎一样,所以我们可以用一个函数就实现所有文件的上传。只是cloudPath的值需要修改,上传图片时是“xxx.png”,上传视频可能是”xxx.mp4”,这些可以在传入参数时设置,这样,云存储的上传方法就讲完了,代码编写很简单。
文件上传到云存储之后,便是下载并打开文件,在上传成功的返回结果res中,藏有fileID这个属性:
利用这个路径,我们便可以从云存储中下载文件,一般下载之后文件也会打开,所以还有打开文件的操作,具体代码如下,同样,下载和打开文件也支持多种文件类型,代码如下:
值得注意的是,如果是视频或者图片,一般不支持下载,所以如果用wx.openDocument打开图片或者视频会报错,这里主要是打开文档类文件,加载图片和视频完全可以使用fileID直接在<image>和<video>标签中设置url来加载图片。另外,一般上传文件者和打开文件者不是同一个用户,因此可以讲上传成功后的fileID存进数据库,方便以后别的用户查找,这点和后端读取图片很类似。
还有一个可以获取它的临时路径,方便对接后台浏览
wx.cloud.getTempFileURL({ fileList: [{ fileID: 'a7xzcb', maxAge: 60 * 60, // one hour }] }).then(res => { // get temp file URL console.log(res.fileList) }).catch(error => { // handle error })
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/Cloud.getTempFileURL.html
sign原来是作为一个时间标识,学到了