微信小程序系列——上传下载图片以及图片的展示

简介: 微信小程序系列——上传下载图片以及图片的展示

一、上传

wxml:

<button bindtap='upload'>上传文件</button>


js:

首先在data里添加全局变量images

1. data: {data: {
  images: []
},
upload: function(){
  wx.chooseImage({
    count: 1,//数量为1个
    sizeType: ['original', 'compressed'],//选择原图或压缩后的图片
    sourceType: ['album', 'camera'],//选择访问相册、相机
    success(res) {
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + '.png',
        filePath: tempFilePaths[0], // 文件路径是数组,取第一个
        success: res => {
          // get resource ID
          db.collection('images').add({
            data:{
              fileID: res.fileID
            }
          }).then(res => {
            console.log(res);
          }).catch(err => {
            console.log(err)
          })
        },
        fail: err => {
          // handle error
        }
      })
    }
  })
},

二、下载

wxml:

<block wx:for='{{images}}'>
  <image src='{{item.fileID}}'></image>
  <button size='mini' data-fileid='{{item.fileID}}' bindtap='downloadFile'>文件下载</button>
</block>

js:

downloadFile: function(e){
  wx.cloud.downloadFile({
    fileID: e.target.dataset.fileid,
  }).then(res => {
    // get temp file path
    //保存图片到手机相册
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success(res) { 
        wx.showToast({
          title: '保存成功',
        })
      }
    })
  }).catch(error => {
    // handle error
  })
},
2.

三、展示图片

云数据库

创建一个集合,名字为:images

wxml:

<button bindtap='getFile'>文件展示</button>
<block wx:for='{{images}}'>
  <image src='{{item.fileID}}'></image>
</block>

js:

1. getFgetFile: function(){
  //使用云函数获取openid
  wx.cloud.callFunction({
    name: 'login'
  }).then(res=>{
    db.collection('images').where({
      _openid: res.result.openid
    }).get().then(res2=>{
      console.log(res2);
      this.setData({
        images: res2.data
      })
    })
  })
},

OK, GAME OVER!

相关文章
|
1月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
48 0
|
4月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
|
9天前
|
小程序 开发者
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
14 0
|
4月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
63 0
|
1月前
|
小程序 开发者
【微信小程序】-- 分包 - 独立分包 & 分包预下载(四十五)
【微信小程序】-- 分包 - 独立分包 & 分包预下载(四十五)
|
1月前
|
小程序
微信小程序下载代码
微信小程序下载代码
|
2月前
|
开发框架 JavaScript 小程序
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
|
2月前
|
文字识别 小程序 开发工具
mPaaS小程序问题之调用选图片的时候报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
39 0
|
3月前
|
小程序 API
微信小程序如何利用createIntersectionObserver实现图片懒加载
微信小程序如何利用createIntersectionObserver实现图片懒加载
|
4月前
|
前端开发 小程序
微信小程序canvas画布绘制;canvas画布图片保存
微信小程序canvas画布绘制;canvas画布图片保存
39 0

热门文章

最新文章