700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序之使用相机拍照图片预览并上传云存储

微信小程序之使用相机拍照图片预览并上传云存储

时间:2022-11-17 12:09:07

相关推荐

微信小程序之使用相机拍照图片预览并上传云存储

调用相机组件,拍摄图片拍摄的图片能够显示在下方点击图片能够预览点击按钮上传到云存储上传完成后有相应的提示信息

一、效果图

二、代码

index.wxml

<camera></camera><button type="primary" bindtap="takePhoto">拍照</button><image mode="widthFix" src="{{src}}" bindtap="see" ></image><button type="primary" bindtap="upload">上传</button>

index.js

Page({data:{src:null},takePhoto:function(e) {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath})console.log(this.data.src)}})},error(e) {console.log(e.detail)},see:function(e){var current = e.currentTarget.dataset.src;console.log(current);wx.previewImage({current: current, // 当前显示图片的http链接urls: [this.data.src],})},upload:function(e){wx.cloud.uploadFile({cloudPath: 'photo/one.jpg', // 上传至云端的路径filePath: this.data.src, // 小程序临时文件路径success: res => {// 返回文件 IDconsole.log(res.fileID)wx.showToast({title: '上传成功',icon:'success'})},fail: console.error})}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。