如何用云开发建立专属文件存储小程序？丨实战

▌1、项目背景

学习云开发也有段时日了，当时就想试试手，不过一直没有灵感。直到有一次同窗问我有没有老师发过的某个ppt，我说你怎么不去翻聊天记录呢？他说太麻烦，并且聊天记录中的文件可能会被清理。

当时就想到若是能够作个小型的文件存储小程序该多好，因而就下手了。每每需求决定产品这就没错了。下面继续介绍下小程序是如何实现的。

▌2、项目简介

爱存储是一个能够将手机相册里的照片（或拍照的照片）和微信聊天会话里的文件（好比Doc、docx、xls、xlsx、ppt等文件）上传到云开发的存储里，并能够进行分享的小程序。

爱存储小程序使用的是小程序的云开发，云开发自带免费的云存储、云数据库，开始时不须要涉及服务器的搭建及运维，也不须要进行域名注册与备案，只须要经过一些简单的API就能实现一个完整项目的业务逻辑，免费并且无需后端，开发成本很是低，所以这个小程序从建立到发布都是免费的，很是适合新手。

▌3、项目准备

在云数据库中建立diary、fileCountInfo集合，权限都是仅建立者可读写，在云存储中建立一个diary文件夹。

▌4、功能介绍与项目的目标

下面将会围绕如下几个比较核心的功能进行分析。

首页弹窗倒计时：

该弹窗在用户使用小程序期间只会弹出一次。弹窗弹出时能够自动取消弹窗在这里是经过倒计时来关闭的固然也能够点击按钮取消，具体效果请亲自使用下小程序，下方是判断及添加缓存部分代码。

//判断是否添加了缓存 
  wx.getStorage({
      key: 'time2',
      success: res => {
        this.setData({
          instructions: false
        })
      },
      fail: err => {
  //添加缓存
        wx.setStorage({
          key: "time2",
          data: new Date().getTime(),
          success: res => {
            this.setData({
              instructions: true
            })
            var interval = setInterval(event => {
              var timeCount = this.data.timeCount
              this.setData({
                timeCount: --timeCount
              })
            }, 1000)
      //15秒后取消弹窗
            setTimeout(res => {
              this.setData({
                instructions: false
              })
              clearInterval(interval);
            }, 15000)
          }
        })


      }
    })
复制代码

限制每一个用户只有100M存储空间，在云开发数据库中建立一个fileCountInfo集合（权限设置为仅建立者可读写），为每一个用户添加一条记录字段有currentStorage(当前存储容量)和maxStorageCount(最大存储容量)，这样就为之后的容量存储限制作了铺垫。下方是部分实现代码,逻辑还须要本身揣摩。

限制支持文件类型：

doc、docx、xls、xlsx、ppt、pptx、pdf 在js里添加了一个数组变量fileFormat用来保存仅支持的文件类型，经过js代码判断用户选取的文件是否在这个数组里从而可否上传，固然判断用户是否能上传还有存储容量的限制，前面已经说了最大 100M，每次用户上传文件currentStorage字段都会增长用户上传的文件大小，具体实现看源代码上面都有注释。下方是部分代码用来实现是不是支持的文件类型。

for (var i = 0; i < res.tempFiles.length; i++) {
            var position = res.tempFiles[i].name.lastIndexOf('.');
            var suffix = res.tempFiles[i].name.substring(position + 1);
            if (this.data.fileFormat.indexOf(suffix) < 0) {
              console.log("文件格式")
              this.setData({
                canUpload: false,
                fileType: suffix
              })
              console.log(this.data.fileType)
              break;
            }
          }
复制代码

文件的上传及删除：

文件上传包括上传以前的判断是否符合要求，前面有提到过。还会涉及到一些坑一会再说。

其余小功能：

文件预览、文件的分享，文件的排序及下方存储容量的显示逻辑比较简单这部分比较简单你们看下源代码就能够了。

▌5、遇到的困难

遇到的困难也就是在文件上传和删除那一块，就是我刚才说一会要解决的问题。在上传文件会涉及到单个文件或多个文件同时上传，是每一个文件上传成功都要提示下成功上传提示呢？仍是所选文件所有上传完才提示呢？若是是前者确定会对用户不友好因此我选择了后者，但怎么才能让它们所有上传完才弹出上传成功提示呢，我试了不少方法好比加个flag标志等等，但都不能很好地解决问题。我静下心来再仔细想一想，想到了之前使用的 promise 正好适合这个场景，因此使用了 promise 解决了该问题，这里遇到的问题和删除文件相似就不一一描述，相关代码可参见项目源码。

▌6、总结

小程序较其余编程语言更容易上手，尤为使用了云开发自带免费的云存储、云数据库，让此项目更快的完成。相信经过学习此项目你已经能够开发本身的文件存储小程序了。

源码地址

tencentcloudbase.github.io/

---

若是你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号～