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

微信小程序chooseImage详解

最新推荐文章于 2025-07-02 19:02:06 发布

It_BeeCoder

最新推荐文章于 2025-07-02 19:02:06 发布

阅读量4.2k

点赞数

分类专栏： 29 微信小程序

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

28 篇文章

订阅专栏

本文详细介绍了微信小程序中chooseImage API的使用方法，包括如何选择图片或拍照，并展示了如何通过JS动态修改文件路径来实现图片预览。

这篇文章主要介绍了微信小程序 chooseImage选择图片或者拍照的相关资料,需要的朋友可以参考下

微信小程序 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>
<br>

号外：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
    } 



原文链接：http://www.cnblogs.com/xianfeng-zhang/p/6634527.html