微信小程序 chooseImage选择图片或者拍照

发布时间 - 2026-01-11 00:33:18    点击率:

微信小程序 chooseImage选择图片或者拍照

一、使用API wx.chooseImage(OBJECT)

var util = require('../../utils/util.js')
Page({
  data:{
    src:"../image/pic4.jpg"
  },
  gotoShow: function(){var _this = this
    wx.chooseImage({
     count: 9, // 最多可以选择的图片张数,默认9
     sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
     success: function(res){
      // success
      console.log(res)
      _this.setData({
        src:res.tempFilePaths
      })
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
     }
    })
  }
 

二、图片路径进行数据绑定

<view class="container">
 <view>
  <button type="default" bindtap="gotoShow" >点击上传照片</button> 
 </view>
 <view>
  <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
 </view>
</view>

号外:

  1、wx.chooseImage 调用相机或相册
  2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定
  3、js中动态修改文件路径

 var _this = this
    wx.chooseImage({
     count: 9, // 最多可以选择的图片张数,默认9
     sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
     success: function(res){
      // success
      console.log(res)
      _this.setData({
        src:res.tempFilePaths
      })
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
     }  

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


# 微信小程序  # chooseImage选择图片或者拍照  # chooseImage  # 微信小程序实现拍照和相册选取图片  # 微信小程序使用前置摄像头拍照  # 微信小程序 拍照或从相册选取图片上传代码实例  # 微信小程序实现拍照画布指定区域生成图片  # 微信小程序拍照和摄像功能实现方法示例  # 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)  # 微信小程序调用摄像头隐藏式拍照功能  # 微信小程序实现倒计时调用相机自动拍照功能  # 微信小程序-拍照或选择图片并上传文件  # 微信小程序实现拍照功能  # 都有  # 最多  # 可以选择  # 绑定  # 希望能  # 谢谢大家  # 上传照片  # function  # _this  # gotoShow  # image  # jpg  # count  # original  # compressed  # Page  # 微信小  # strong  # sizeType 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 韩国网站服务器搭建指南:VPS选购、域名解析与DNS配置推荐  nginx修改上传文件大小限制的方法  Laravel如何实现多对多模型关联?(Eloquent教程)  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  利用vue写todolist单页应用  佛山企业网站制作公司有哪些,沟通100网上服务官网?  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  昵图网官方站入口 昵图网素材图库官网入口  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm,可以有哪些措施降低舍内氨气水平?  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  电商网站制作价格怎么算,网上拍卖流程以及规则?  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  制作电商网页,电商供应链怎么做?  中山网站推广排名,中山信息港登录入口?  EditPlus中的正则表达式 实战(2)  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  大同网页,大同瑞慈医院官网?  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  香港代理服务器配置指南:高匿IP选择、跨境加速与SEO优化技巧  潮流网站制作头像软件下载,适合母子的网名有哪些?  如何彻底卸载建站之星软件?  微信小程序 wx.uploadFile无法上传解决办法  Python文件流缓冲机制_IO性能解析【教程】  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  如何在Windows环境下新建FTP站点并设置权限?  北京网站制作公司哪家好一点,北京租房网站有哪些?  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  动图在线制作网站有哪些,滑动动图图集怎么做?  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  详解jQuery中的事件  php json中文编码为null的解决办法  常州企业网站制作公司,全国继续教育网怎么登录?  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  php打包exe后无法访问网络共享_共享权限设置方法【教程】  JS碰撞运动实现方法详解  Laravel集合Collection怎么用_Laravel集合常用函数详解  Laravel Docker环境搭建教程_Laravel Sail使用指南  高防网站服务器:DDoS防御与BGP线路的AI智能防护方案  JS实现鼠标移上去显示图片或微信二维码  北京的网站制作公司有哪些,哪个视频网站最好?  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  如何在宝塔面板中修改默认建站目录?  零服务器AI建站解决方案:快速部署与云端平台低成本实践  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  如何快速搭建高效可靠的建站解决方案?  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  如何在阿里云完成域名注册与建站?  如何用好域名打造高点击率的自主建站?  智能起名网站制作软件有哪些,制作logo的软件?