小程序云存储笔记

1.控制台上传图片和视频到云存储

在云开发中点击存储后直接把文件或者文件夹拉进去即可。(可以是图片、视频、音频、word、excel、pdf等等)
在这里插入图片描述
单击该文件,右边会出现这个文件的下载地址和他在云端的文件id
在这里插入图片描述

2.上传图片到云存储

  chooseImg(){
    const that = this;
    wx.chooseImage({
      //选择多少张图片,不写该属性则默认为9
      count: 1,
      //所选图片的尺寸,original原图,compressed压缩图片
      sizeType: ['original', 'compressed'],
      // 选择图片的来源,album相册,camera相机
      sourceType: ['album', 'camera'],
      success (res) {
        console.log(res);
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        that.uploadImg(tempFilePaths[0],'girl.jpg');
      }
    })
  },
  uploadImg(ImgPath,fileName){
    wx.cloud.uploadFile({
      //文件的云路径
      cloudPath:fileName,
      //文件路径(刚才的临时云文件路径)
      filePath:ImgPath
    })
    .then(res=>{
      console.log('存储成功',res)
    })
    .catch(err=>{
      console.log('存储失败',err)
    })
  }
      

这里,chooseImg()中的res的内容为:
在这里插入图片描述

3.调用云存储的图片信息

首先,我们需要把云存储下照片的下载地址或者文件ID的值给到我们数据库的对象。
在这里插入图片描述
之后就跟正常调用一样使用就可以了,如下:

在js文件中这么写:

  onLoad(){
    wx.cloud.callFunction({
      name:'getData'
    })
    .then(res =>{
      console.log('请求云函数成功',res);
      this.setData({
        list:res.result.data
      })
    })
    .catch(err=>{
      console.log('请求云函数失败',err)
    })
  },

在wxml文件中这么写:

<view wx:for="{{list}}">
  <view class="item">
    <image src="{{item.img}}" class="img"></image>
    <text>商品名:{{item.name}}</text>
    <text>价格:{{item.price}}</text>
  </view>
</view>

4.上传视频到云存储

其实跟上传图片差不多

  chooseMovie(){
    wx.chooseVideo({
      //album是本地视频,camera是用相机当场拍摄
      sourceType: ['album','camera'],
      // 拍摄最长时长
      maxDuration:60,
      //back是后置摄像头
      camera: 'back',
    })
    .then(res =>{
      this.uploadVideo(res.tempFilePaths[0],'video.mp4');
    })
    .catch(err=>{
      console.log('上传视频失败',err)
    })
  },

  uploadVideo(VideoPath,fileName){
    wx.cloud.uploadFile({
      //文件的云路径
      cloudPath:fileName,
      //文件路径(刚才的临时云文件路径)
      filePath:VideoPath
    })
    .then(res=>{
      console.log('存储成功',res)
    })
    .catch(err=>{
      console.log('存储失败',err)
    })
  }

5.上传其他文件例如word,pdf等

小程序文档搜

wx.chooseMessageFile()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序笔记demo是一款基于小程序开发的笔记应用程序。它可以帮助用户在小程序平台上轻松地记录、管理和分享笔记。 首先,在小程序笔记demo中,用户可以创建多个笔记本,并将笔记按照不同的分类进行整理。这样,用户可以更好地组织和查找自己的笔记内容。 其次,该应用提供了丰富的编辑功能。用户可以在笔记中添加文本、图像、链接等不同的媒体元素。而且,用户可以对文本内容进行字体、大小、颜色、对齐等样式的调整,以及对图像进行裁剪、旋转和滤镜处理等操作,使笔记内容更加丰富和生动。 此外,小程序笔记demo还提供了数据同步的功能。不论用户是在手机、平板还是电脑上,只要登录同一账号,即可实现笔记数据的同步和共享。这意味着用户可以随时随地访问自己的笔记,并且与他人共享自己的笔记内容,便于协同工作和知识分享。 另外,该应用还具备创新的储存功能。小程序笔记demo将用户的笔记数据存储端,有效保障了数据的安全性和可靠性。即使用户更换设备或者卸载应用,也可以轻松地恢复之前的笔记数据。 总之,小程序笔记demo是一款便捷、高效的笔记应用程序。它通过提供多样化的编辑和同步功能,为用户提供了更好的笔记管理和分享体验。无论是个人学习、工作办公还是团队协作,都是一款非常实用的工具。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值