更新记录

1.0.0（2026-01-11） 下载此版本

初始化第一版

平台兼容性

uni-app(4.66)

cop-chooseFile 文件选择组件

基于 renderjs 的文件选择组件，支持触发模式，可选择任意类型文件。

特点

• ✅ 基于 renderjs，稳定可靠
• ✅ 支持触发模式，无需显示按钮
• ✅ 支持自定义接受的文件类型
• ✅ 返回 base64 格式文件数据
• ✅ APP 和 H5 双端支持

使用方法

基本使用

<template>
  <view>
    <!-- 自定义触发按钮 -->
    <button @click="selectFile">选择文件</button>

    <!-- 隐藏的文件选择组件 -->
    <cop-chooseFile 
      :trigger="triggerFlag"
      accept="*"
      @receiveRenderFile="handleFile">
    </cop-chooseFile>
  </view>
</template>

<script>
import copChooseFile from '@/uni_modules/cop-chooseFile/components/cop-chooseFile/cop-chooseFile.vue'

export default {
  components: {
    copChooseFile
  },
  data() {
    return {
      triggerFlag: 0
    }
  },
  methods: {
    // 点击按钮触发文件选择
    selectFile() {
      this.triggerFlag = Date.now()
    },

    // 处理选择的文件
    handleFile(fileData) {
      console.log('文件名:', fileData.name)
      console.log('文件大小:', fileData.size)
      console.log('文件类型:', fileData.type)
      console.log('文件base64:', fileData.filePath)
    }
  }
}
</script>

选择特定类型文件

<!-- 只选择图片 -->
<cop-chooseFile 
  :trigger="triggerFlag"
  accept="image/*"
  @receiveRenderFile="handleFile">
</cop-chooseFile>

<!-- 只选择音频 -->
<cop-chooseFile 
  :trigger="triggerFlag"
  accept="audio/*,.mp3,.wav"
  @receiveRenderFile="handleFile">
</cop-chooseFile>

<!-- 只选择文档 -->
<cop-chooseFile 
  :trigger="triggerFlag"
  accept=".pdf,.doc,.docx,.txt"
  @receiveRenderFile="handleFile">
</cop-chooseFile>

API

Props

Events

fileData 参数说明

• name: 文件名
• filePath: 文件路径（APP 端为 base64，H5 端为 blob URL）
• size: 文件大小（字节）
• type: 文件 MIME 类型

注意事项

1. 组件是隐藏的，不会在页面上显示
2. 通过改变 trigger prop 的值来触发文件选择
3. APP 端返回的是 base64 格式，可能较大，注意性能
4. H5 端返回的是 blob URL，需要读取后才能获取 base64

更新日志

1.0.0 (2026-01-07)

• 初始版本
• 支持触发模式文件选择
• 支持 APP 和 H5 双端