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

一、效果图

在这里插入图片描述

二、代码

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 => {
      // 返回文件 ID
      console.log(res.fileID)
      wx.showToast({
        title: '上传成功',
        icon:'success'
      })
    },
    fail: console.error
  })
 }
})
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐