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

最新推荐文章于 2025-02-08 13:29:06 发布

C币贫困户

最新推荐文章于 2025-02-08 13:29:06 发布

阅读量2.4k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/weixin_48747169/article/details/125114246

版权

微信小程序专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何在微信小程序中使用相机组件拍摄图片，并将图片显示、预览以及上传到云存储的过程。通过`<camera>`组件捕获照片，`<image>`组件展示图片，`wx.previewImage`进行图片预览，`wx.cloud.uploadFile`完成文件上传，最终在上传成功后显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、效果图

在这里插入图片描述

二、代码

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
  })
 }
})