E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

一、上传wxml:<button bindtap=’upload’>上传文件</button>js:首先在data里添加全局变量imagesdata: {  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  })},三、展示图片云数据库创建一个集合,名字为:imageswxml:<button bindtap=’getFile’>文件展示</button><block wx:for='{{images}}’>  <image src='{{item.fileID}}’></image></block>js:getFile: 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!更多内容,请关注公众号:程序员高手之路在公众号回复:小程序资源   即可免费获取以下微信小程序视频教程!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序系列——上传下载图片以及图片的展示
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏