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

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

一、上传

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!

相关文章
|
6月前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
12月前
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
493 167
|
人工智能 自然语言处理
使用企业微信或公众号自动回复图片消息
AppFlow支持企业微信和公众号接收图片消息,并提供两种回复方式。方式一:直接回复图片消息,用户发送图片后立即收到回复,但无法继续追问。方式二:先保存图片,待用户发送文字后再一并处理并回复。配置步骤包括选择模板、配置鉴权信息、设置执行动作参数及发布连接流。详细操作可参考相关文档。
1429 1
使用企业微信或公众号自动回复图片消息
|
小程序 前端开发 IDE
校园二手书交易小程序源码下载
校园二手书交易小程序有四个模块:首页、发布、消息和我的。用户可以在小程序上进行二手书交易、扫码或者输入ISBN发布二手书、用户之间可以发送聊天消息,同时小程序支持购买书籍后跑腿兼职配送,以及对订单评价等多个特色功能。
478 0
校园二手书交易小程序源码下载
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3713 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
296 0
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
502 0
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号

热门文章

最新文章