uni-app 文件选择器

在 uni-app 中，文件选择器通常用于让用户从设备中选择文件，比如图片、视频等。uni-app 提供了相应的 API 来实现这一功能。下面是一个使用 uni.chooseImage API 的示例代码，用于选择图片文件。此外，我也会展示如何使用 uni.chooseVideo API 来选择视频文件。

选择图片文件

<template>
  <view>
    <button type="primary" @click="chooseImage">选择图片</button>
    <view v-for="(image, index) in images" :key="index">
      <image :src="image.path" style="width: 100px; height: 100px; margin: 10px;"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9, // 最多可以选择的图片张数
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          this.images = tempFilePaths.map(path => ({ path }));
        },
        fail: (err) => {
          console.error('选择图片失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 添加一些简单的样式 */
button {
  margin: 20px;
}
</style>

选择视频文件

<template>
  <view>
    <button type="primary" @click="chooseVideo">选择视频</button>
    <video :src="videoPath" controls style="width: 300px; height: 200px;"></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoPath: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
        camera: 'back', // 默认调用后置摄像头
        success: (res) => {
          this.videoPath = res.tempFilePath;
        },
        fail: (err) => {
          console.error('选择视频失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 添加一些简单的样式 */
button {
  margin: 20px;
}
</style>

上述代码分别展示了如何使用 uni.chooseImage 和 uni.chooseVideo API 来选择图片和视频文件，并在页面上显示选中的文件。这些示例展示了基本的文件选择功能，并可以根据实际需求进行扩展。