云存储之上传图片和展示图片(小程序云开发)

1.云存储介绍

2.demo代码(上传图片/文件)

cloud.wxml

<view>云存储</view>
<button bindtap="upload">上传图片</button>

cloud.js

// miniprogram/pages/cloud/cloud.js
const db = wx.cloud.database();//初始化数据库
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  // 上传图片
  upload() {
    // 1.选择图片  ,官方文档api
    // https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
    wx.chooseImage({
      count: 1,//当前图片选择个数, 小程序最多支持一下选择9张
      sizeType: [\'original\', \'compressed\'], //[\'源文件\',\'压缩文件\']
      sourceType: [\'album\', \'camera\'],//文件来源  [\'相册\',\'摄像头牌照\']
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片(图片临时路径)
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths) //tempFilePaths是数组
        // 官方api   https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html
        wx.cloud.uploadFile({
          //cloudPath: \'example.png\', // 上传至云端的路径

　　　　　　　　//图片名字先用时间戳代替了,看自己喜好

　　　　　　　　cloudPath: new Date().getTime()+\'.png\',

          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            db.collection(\'image\').add({
              data: {
                fileID: res.fileID
              }
            }).then(res=>{
              console.log(res)
            }).catch(err=>{
              console.error(err)
            })
          },
          fail: console.error
        })
      }
    })
  }

})

至此上传图片成功啦!

数据库里:

云存储里:

3.图片/文件获取展示

<view style="line-height:200rpx">云存储</view>
<button bindtap="getFile">图片展示</button>

<block wx:for="{{images}}" wx:key="index">
  <image src="{{item.fileID}}"></image>
</block>

// 获取图片 并且展示  先获取当前用户登录的openid再去对应的  拿数据
  getFile() {
    wx.cloud.callFunction({
      name: \'login\'
    }).then(res => {
      db.collection(\'image\').where({
        _openid:res.result.openid
      }).get().then(res2=>{
        console.log(res2)
        this.setData({
          images: res2.data
        })
      })
    })
  },

其中wx.cloud.callFunction({
      name: \'login\'
    })

login云函数自带的,直接拿来用,也可以自己写, 写完记得右键部署

效果:

4.图片/文件下载

<block wx:for="{{images}}" wx:key="index">
  <image mode="aspectFill" src="{{item.fileID}}"></image>
  <button size="mini" data-fileid="{{item.fileID}}" bindtap="downloadFile">下载图片</button>
</block>

//下载图片/文件
  downloadFile(e) {
    // console.log(e.target.dataset.fileid)
    wx.cloud.downloadFile({
      fileID: e.target.dataset.fileid, // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)

        // 官方api保存图片到相册https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html
        // 保存图片到手机相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: \'保存到手机成功\',
            })
          },
          fail(err) {
            console.log(err)
              wx.showModal({
                title: \'提示\',
                content: \'需要您授权保存相册\',
                showCancel: true,//是否显示取消按钮
                success: res => {
                  if (res.confirm) {
                    console.log(\'用户点击确定\')
                    wx.openSetting({
                      success: res2 => {
                        if (res2.authSetting[\'scope.writePhotosAlbum\']) {
                          wx.showModal({
                            title: \'提示\',
                            content: \'获取权限成功,再次点击图片即可保存\',
                          })
                        }
                      },
                      fail: err2 => {
                        console.log(err2)
                      }
                    })
                  } else if (res.cancel) {
                    console.log(\'用户点击取消\')
                  }
                }
              })
          }
        })
      },
      fail: console.error
    })
  },

我这边的设计, 用户拒绝授权相册, 再次点击弹出再次去授权, 比较人性

秒客网

云存储之上传图片和展示图片(小程序云开发)

相关文章