微信小程序实现拍照并拿到图片对象功能

微信小程序提供了函数chooseImage

我们可以在wxml中定义一个按钮

html 复制代码
<view>
    <button bindtap="photograph">拍照</button>
</view>

这里绑定了一个点击事件 叫 photograph

然后 我们在js中编写代码如下

javascript 复制代码
//import { getAll } from "../../api/bookApi";
Page({
  data: {
  },
  onLoad() {
    
  },
  photograph() {
    wx.chooseImage({
      count: 1,
      sourceType: ['camera'],
      success: function (res) {
        console.log(res.tempFilePaths);
      },
      fail: function (res) {
        console.log(res.errMsg);
      }
    })
  },
 
})

这里 我们点击后调用了wx.chooseImage 回调中接受了一个res对象

其中的tempFilePaths字段就是我们要到图片集合

我们运行代码

然后用手机真机调试 然后按下这个拍照按钮

他就调用上了我们手机的拍照功能

然后我们在开发者工具中选择电脑本地的图片

res.tempFilePaths就会帮我们将图片的对象拿到

相关推荐
andrsted13 小时前
老师可以用小程序在线整理题库、课堂检测和错题集
学习·微信小程序·小程序·学习方法
show43313 小时前
2026小程序视频转文字多语种识别引擎选型:22方言25外语
小程序·音视频
学习星球1 天前
AI Agent 成本工程实战:从 OpenAI Codex 的 8 个“烧 Token“Bug 学起
人工智能·设计模式·微信小程序
律宏阔1 天前
微信小程序使用 Orval + OpenAPI 自动生成接口:Axios 兼容踩坑记录
前端·微信小程序
律宏阔1 天前
微信小程序集成 TDesign 完整记录:解决 NPM packages not found
前端·微信小程序
律宏阔1 天前
微信小程序 ECharts 瘦身实战:分包异步化 + componentPlaceholder 避开主包 2MB 限制
前端·微信小程序
lhldsg2 天前
AI零售系统实战指南:从架构设计到落地部署全解析
java·人工智能·小程序·uni-app·零售
2601_949950632 天前
没有现成习题,试试AI再写出题
人工智能·小程序·刷题·练习·小程序推荐
andrsted2 天前
作业发布、课堂检测和错题讲评,用一个小程序完成
学习·微信小程序·小程序·学习方法
汤姆yu2 天前
基于微信小程序的家电维修预约系统
微信小程序·小程序·家电维修