如何用云开发建立专属文件存储小顺序?丨实战_腾讯云双十一,腾讯云

  • 如何用云开发建立专属文件存储小顺序?丨实战_腾讯云双十一,腾讯云已关闭评论
  • 100 人浏览
  • A+
所属分类:教程分享 首页

▌一、项目背景

进修云开发也有段光阴了,当时就想尝尝手,不过一向没有灵感。直到有一次同砚问我有无先生发过的某个ppt,我说你怎样不去翻谈天纪录呢?他说太贫苦,而且谈天纪录中的文件大概会被清算。

当时就想到假如能够做个小型的文件存储小顺序该多好,于是就动手了。每每需求决议产物这就没错了。下面继承引见下小顺序是怎样完成的。

▌二、项目简介

爱存储是一个能够将手机相册里的照片(或照相的照片)和微信谈天会话里的文件(比方Doc、docx、xls、xlsx、ppt等文件)上传到云开发的存储里,并能够举行分享的小顺序。

爱存储小顺序运用的是小顺序的云开发,云开发自带免费的云存储、云数据库,开始时不需要触及服务器的搭建及运维,也不需要举行域名注册与备案,只需要经由过程一些简朴的API就可以完成一个完全项目的营业逻辑,免费而且无需后端,开发本钱异常低,因而这个小顺序从建立到宣布都是免费的,异常合适新手。

如何用云开发建立专属文件存储小顺序?丨实战_腾讯云双十一,腾讯云

▌三、项目预备

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

▌四、功用引见与项目的目的

下面将会缭绕以下几个比较中心的功用举行剖析。

首页弹窗倒计时:

该弹窗在用户运用小顺序时期只会弹出一次。弹窗弹出时能够自动作废弹窗在这里是经由过程倒计时来封闭的固然也能够点击按钮作废,详细结果请亲身运用下小顺序,下方是推断及增添缓存部份代码。

//推断是不是增添了缓存  
  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;
            }
          }

文件的上传及删除:

文件上传包含上传之前的推断是不是符合要求,前面有提到过。还会触及到一些坑一会再说。

其他小功用:

文件预览、文件的分享,文件的排序及下方存储容量的显现逻辑比较简朴这部份比较简朴人人看下源代码就可以够了。

▌五、碰到的难题

碰到的难题也就是在文件上传和删除那一块,就是我适才说一会要处理的问题。在上传文件会触及到单个文件或多个文件同时上传,是每一个文件上传胜利都要提醒下胜利上传提醒呢?照样所选文件悉数上传完才提醒呢?假如是前者一定会对用户不友好所以我挑选了后者,但怎样才能让它们悉数上传完才弹出上传胜利提醒呢,我试了许多要领比方加个flag标志等等,但都不能很好地处理问题。我静下心来再细致想一想,想到了之前运用的 promise 恰好合适这个场景,所以运用了 promise 处理了该问题,这里碰到的问题和删除文件相似就不逐一形貌,相干代码可拜见项目源码。

▌六、总结

小顺序较其他编程言语更轻易上手,特别运用了云开发自带免费的云存储、云数据库,让此项目更快的完成。置信经由过程进修此项目你已能够开发本身的文件存储小顺序了。

源码地点

https://tencentcloudbase.github.io/

假如你想要相识更多关于云开发CloudBase相干的手艺故事/手艺实战经验,请扫码关注【腾讯如此开发】民众号~

如何用云开发建立专属文件存储小顺序?丨实战_腾讯云双十一,腾讯云

腾讯云双十一活动