uniapp chooseimage组件如何使用

在uniapp中使用chooseimage组件时遇到问题，具体代码如下：

<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"></uni-file-picker>

但选择图片后无法获取到图片路径，回调函数也没有触发。请问正确的使用方法是什么？需要配置哪些额外参数？如何在选择后获取到图片的本地临时路径？

2 回复

使用uni.chooseImage方法，传入参数调用即可。

示例：

uni.chooseImage({
  count: 9, // 最多选择图片数量
  success: (res) => {
    console.log(res.tempFilePaths) // 图片本地路径
  }
})

支持设置图片数量、来源（相册/相机）、图片尺寸等参数。


在 UniApp 中使用 chooseImage 组件（实际是 API，不是组件）可以从本地相册或相机选择图片。以下是基本使用方法：

代码示例

uni.chooseImage({
  count: 1, // 默认9，最多可选择图片数量
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: (res) => {
    // 返回选定照片的本地文件路径列表，tempFilePath 可以作为 img 标签的 src 属性显示图片
    console.log(res.tempFilePaths);
  },
  fail: (err) => {
    console.log('选择图片失败：', err);
  }
});

参数说明

  • count: 最多选择的图片数量。
  • sizeType: 图片尺寸选项，original（原图）或 compressed（压缩图）。
  • sourceType: 图片来源，album（相册）或 camera（相机）。

注意事项

  1. 在 H5 平台部分浏览器可能不支持。
  2. 返回的临时路径在应用本次运行期间有效，如需持久保存需调用 uni.saveFile。
  3. 实际开发中建议添加用户授权处理。

这是一个基础图片选择功能实现，可根据需求调整参数。

回到顶部