uniapp chooseimage如何使用

在uniapp中使用chooseImage时遇到问题，具体代码如下： uni.chooseImage({ count: 1, sourceType: [‘album’], success: (res) => { console.log(res.tempFilePaths); } }); 但调用相册选择图片后没有反应，也没有报错。请问可能是哪里配置有问题？需要额外设置权限吗？在H5和App端表现是否不同？

2 回复

uniapp的uni.chooseImage用于选择图片。示例代码：

uni.chooseImage({
  count: 1,
  success: (res) => {
    console.log(res.tempFilePaths)
  }
})

参数count控制选择数量，成功回调返回临时文件路径。


在 UniApp 中，uni.chooseImage 用于从相册或相机选择图片。以下是基本使用方法：

1. 基本语法：

uni.chooseImage({
  count: 1, // 最多选择图片数量
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
  success: (res) => {
    // 成功回调
    console.log(res.tempFilePaths) // 返回选定照片的本地文件路径列表
  },
  fail: (err) => {
    console.log(err)
  }
})

2. 参数说明：

  • count: 最多可选图片数量，默认 9
  • sizeType: 图片尺寸，可选 original/compressed
  • sourceType: 图片来源，可选 album/camera

3. 完整示例：

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <image v-for="item in imageList" :src="item" :key="item"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 3,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.imageList = res.tempFilePaths
        }
      })
    }
  }
}
</script>

4. 注意事项：

  • 需要在小程序后台配置合法域名
  • H5端可能受浏览器权限限制
  • 返回的临时路径在本次应用运行期间有效

这样就可以实现基本的图片选择功能了。

回到顶部