调用相机组件,拍摄图片拍摄的图片能够显示在下方点击图片能够预览点击按钮上传到云存储上传完成后有相应的提示信息
一、效果图
二、代码
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})}})