uni-app的unisdk是否可以使用uni.chooseMedia API功能

发布于 1周前 作者 eggper 来自 Uni-App

uni-app的unisdk是否可以使用uni.chooseMedia API功能

unisdk可以使用 uni.chooseMedia API功能的吗

开发环境、版本号、项目创建方式

项目创建方式 开发环境 版本号
无相关信息 无相关信息 无相关信息
1 回复

当然可以,uni-appuni-sdk 提供了丰富的 API 接口,其中 uni.chooseMedia 是用于选择媒体文件(图片、视频)的一个常用接口。下面是一个使用 uni.chooseMedia 的代码示例,展示了如何在 uni-app 中调用该接口来选择图片或视频文件。

<template>
  <view>
    <button type="primary" @click="chooseMedia">选择媒体文件</button>
    <view v-if="mediaFiles.length">
      <view v-for="(file, index) in mediaFiles" :key="index">
        <image v-if="file.type === 'image'" :src="file.tempFilePath" style="width: 100px; height: 100px;"></image>
        <video v-if="file.type === 'video'" :src="file.tempFilePath" controls style="width: 300px; height: 200px;"></video>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mediaFiles: []
    };
  },
  methods: {
    chooseMedia() {
      uni.chooseMedia({
        count: 9, // 最多可以选择的文件个数
        mediaType: ['image', 'video'], // 可以选择的文件类型
        sourceType: ['album', 'camera'], // 选择文件的来源
        success: (res) => {
          this.mediaFiles = res.tempFiles;
          console.log('选择的媒体文件:', this.mediaFiles);
        },
        fail: (err) => {
          console.error('选择媒体文件失败:', err);
        }
      });
    }
  }
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>

代码说明

  1. 模板部分 (<template>):

    • 一个按钮用于触发选择媒体文件的操作。
    • 一个循环展示选择的媒体文件,根据文件类型(图片或视频)使用 <image><video> 标签进行展示。
  2. 脚本部分 (<script>):

    • 定义了一个 mediaFiles 数组用于存储选择的媒体文件。
    • chooseMedia 方法中调用了 uni.chooseMedia 接口,并设置了相关参数,如 countmediaTypesourceType
    • 在成功回调中,将选择的媒体文件保存到 mediaFiles 数组中,并在控制台打印出来。
  3. 样式部分 (<style>):

    • 样式部分可以根据需要进行调整,这里未做特殊处理。

这个示例展示了如何在 uni-app 中使用 uni.chooseMedia API 来选择媒体文件,并将其展示在页面上。你可以根据自己的需求进一步修改和扩展这个示例。

回到顶部