uniapp如何读取媒体图片和视频文件

在uniapp中如何读取本地的媒体图片和视频文件？我想实现一个功能，用户可以从相册或文件管理器中选择图片和视频，然后上传到服务器。但不知道uniapp具体用什么API来实现这个功能，是否需要额外的插件？希望能提供一个完整的代码示例，包括权限处理和文件读取的步骤。

2 回复

在uniapp中读取媒体文件（图片/视频）主要有以下几种方式：

  1. 选择文件

    // 选择图片
uni.chooseImage({
  count: 1,
  success: (res) => {
    console.log(res.tempFilePaths[0])
  }
})

// 选择视频
uni.chooseVideo({
  success: (res) => {
    console.log(res.tempFilePath)
  }
})

  2. 预览文件

    // 预览图片
uni.previewImage({
  urls: [imagePath]
})

// 预览视频（使用video组件）
<video :src="videoPath"></video>

  3. 上传文件

    uni.uploadFile({
  url: '你的服务器地址',
  filePath: tempFilePath,
  name: 'file'
})

  4. 注意事项

    • 获取的是临时路径，应用关闭后失效
    • 大文件建议分片上传
    • 注意各平台的文件格式限制

建议配合uni-ui的upload组件使用更便捷。


在 UniApp 中，读取媒体图片和视频文件主要通过以下方法实现，支持从本地相册或相机获取文件。

1. 选择图片文件

使用 uni.chooseImage API 从相册或相机选择图片。

uni.chooseImage({
  count: 1, // 可选数量，默认 9
  sourceType: ['album', 'camera'], // 来源：相册和相机
  success: (res) => {
    const tempFilePaths = res.tempFilePaths; // 返回选定图片的本地临时路径
    console.log('图片路径:', tempFilePaths);
    // 可进一步上传或显示图片
  },
  fail: (err) => {
    console.error('选择图片失败:', err);
  }
});

2. 选择视频文件

使用 uni.chooseVideo 或 uni.chooseMedia（推荐，HBuilderX 2.9+ 支持）选择视频。

// 方法一：chooseVideo（基础选择）
uni.chooseVideo({
  sourceType: ['album', 'camera'],
  maxDuration: 60, // 最大时长（秒）
  success: (res) => {
    console.log('视频路径:', res.tempFilePath);
    // 返回临时路径，可用于预览或上传
  }
});

// 方法二：chooseMedia（统一接口，支持图片和视频）
uni.chooseMedia({
  count: 1,
  mediaType: ['video'], // 指定为视频
  sourceType: ['album', 'camera'],
  success: (res) => {
    const tempFiles = res.tempFiles;
    tempFiles.forEach(file => {
      console.log('文件类型:', file.type);
      console.log('文件路径:', file.tempFilePath);
    });
  }
});

3. 预览媒体文件

  • 图片预览：使用 uni.previewImage 全屏查看图片。
    uni.previewImage({
  urls: [tempFilePaths], // 需预览的图片路径列表
  current: 0 // 当前显示索引
});
  • 视频播放：通过 <video> 组件加载临时路径。
    <video :src="videoPath" controls></video>

注意事项：

  • 临时路径：选择的文件返回临时路径，应用关闭后可能失效，需及时上传或保存。
  • 平台差异：部分 API 在个别平台有限制（如微信小程序不支持 chooseMedia 的混合选择）。
  • 权限配置：在 manifest.json 中申请相机、相册权限（App 平台需配置）。

通过以上方法，可灵活实现媒体文件的读取与处理。

回到顶部