美文网首页
小程序云开发(五)——云存储

小程序云开发(五)——云存储

作者: 程序员方方土 | 来源:发表于2019-11-28 23:50 被阅读0次

写在前面:

最近看到看到很多人在感叹时间过得很快!在回想一下,时间确实过得很快,我也不由得想起了我来上海这两年遇到的一些事情,这些事情,后续我再慢慢记录下来。这两天,我也陆陆续续做一些面试知识总结,后面也分享给小伙伴们。咱们言归正传,小程序这里学习没有断,我们继续。

云存储:

我这里主要提供3种方式,上传、显示、下载的代码片段,每一行代码有对应的说明,有问题或者说的不对的,欢迎留言,共同学习。

上传图片:

/**
   * 上传图片
   */
  upload: function() {
    wx.chooseImage({//选择照片
      count: 1,//选择照片数量
      sizeType: ['original', 'compressed'],//照片的大小,original=》原图,compressed=》压缩的
      sourceType: ['album', 'camera'],//照片来源,album=》来源于相册,camera=》拍照
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;//照片的一个虚拟路径
        console.log(tempFilePaths);
        wx.cloud.uploadFile({//调用上传文件函数,这些在小程序开发文档中有
          cloudPath: new Date().getTime() + '.png',//照片上传到云存储的自定义名称路径
          filePath: tempFilePaths[0]//取其中一张照片的虚拟路径
        }).then(res2 => {//调用成功后的的箭头函数
          console.log(res2)//成功后控制台打印
          db.collection('image').add({//找到存储图片虚拟路径的集合(也就是数据库表),并添加数据
            data: {
              fileID: res2.fileID//添加虚拟路径
            }
          }).then(res3 => {
            console.log(res3)
          }).catch(err3 => {
            console.error(err3)//错误日志在控制台打印
          })
        }).catch(err2 => {
          console.error(err2)
        })
      },
      fail(err) {
        console.error(err)
      }
    })
  },

图片显示:

  data: {
    images: []
  },
  /**
   *文件显示
   */
  getFile: function() {
    wx.cloud.callFunction({//唤醒云函数
      name: 'login'//云函数名称为“login”,项目建立之初已经存在,目的是为了确认你显示的是哪一个openID的图片,可用于信息获取
    }).then(res => {
      db.collection('image').where({//通过数据库查找image表中的数据
        _openId: res.result._openId//查找条件是openID为当前用户的
      }).get().then(res2 => {
        console.log(res2)
        this.setData({//把照片的data数据塞到data中,这时候需要显示在小程序页面中,以images: []来显示
          images: res2.data//这是所显示的data数据
        })
      }).catch(err2 => {
        console.error(err2)
      })
    }).catch(err =>{
      console.error(err)
    })
  },

下载图片:

  /**
   * 下载图片
   */
  downloadFiled: function(event) {//event参数表示上下文的内容
    wx.cloud.downloadFile({//调用已有的下载函数,这些在小程序开发文档中有
      fileID: event.target.dataset.fileid,//获取当前上下文的目标数据的文件id,可以理解为对应图片的路径
      success: res => {
        // get temp file path
        console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({//然后调用保存图片的函数
          filePath: res.tempFilePath,//对获取到的文件路径进行保存
          success(res) {//成功的回调函数
            wx.showToast({//调用成功后显示内容
              title: '保存成功',//调用成功后会返回一个‘保存成功’的内容到界面
            })
           }
        })
      },
      fail: err => {
        // handle error
        console.error(err)
      }
    })
 
  },

相关文章

  • 小程序云开发(五)——云存储

    写在前面: 最近看到看到很多人在感叹时间过得很快!在回想一下,时间确实过得很快,我也不由得想起了我来上海这两年遇到...

  • 小程序云开发 - 云存储

    云存储 小程序端 上传文件 在小程序端可调用 wx.cloud.uploadFile 方法进行上传: 下载文件 可...

  • 微信小程序与云开发

    微信小程序基础概念 小程序云开发的三大基础能力:云数据库、云函数、云存储 Java、NodeJS、JavaScri...

  • 小程序·云开发数据库

    一、 小程序云原生的探索 云开发:云函数、云存储、云数据库+链路原生、场景原生、开发原生。 云数据库特点:弹性收缩...

  • 快速上手小程序云开发

    云开发操作概述云函数操作实战云存储操作实战云数据库操作实战 小程序云开发集成于小程序控制台的原生serverles...

  • 小程序Cloud开发归纳

    小程序云开发 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小...

  • 云开发-校园二手书小程序源码

    1.下载源码,导入小程序开发工具。点我下载 2.配置基础功能。 程序数据存储借助了小程序云开发,所以首先要开通云开...

  • 【技术】微信小程序·云开发 三大基础能力

    1.前言 上周文章《微信小程序之云开发》中稍微介绍了下小程序云开发的三大基础能力:数据库、存储和云函数,但不甚全面...

  • 借助云开发实现小程序朋友圈的发布与展示丨实战

    知识技能点 1.小程序云开发 2.小程序云存储 3.小程序云数据库 4.图片大图预览 5.图片选择与删除 先给大家...

  • 小程序云开发教程(初识篇)

    目录一、为什么学小程序云开发二、小程序云开发是什么三、学习准备 系列教程小程序云开发教程(入门篇)小程序云开发教程...

网友评论

      本文标题:小程序云开发(五)——云存储

      本文链接:https://www.haomeiwen.com/subject/mptwwctx.html