uniapp uni-file-picker组件的使用方法

在uniapp中使用uni-file-picker组件时，如何限制上传文件类型为图片？我按照文档设置了accept=“image”，但依然可以选取非图片文件，请问正确的配置方法是什么？另外，如何动态修改文件数量限制？

2 回复

uniapp的uni-file-picker组件用于文件上传。使用方法：

  1. 引入组件：<uni-file-picker v-model="fileList"></uni-file-picker>
  2. 配置参数：可设置文件类型、数量限制等
  3. 监听事件：通过@success获取上传结果
  4. 支持预览和删除功能

简单配置即可实现文件选择上传。


UniApp 的 uni-file-picker 组件用于实现文件选择与上传功能，支持选择图片、视频等文件类型。以下是基本使用方法：

基本用法

  1. 引入组件
    在页面或组件的 template 中直接使用：

    <template>
  <view>
    <uni-file-picker 
      v-model="fileList"
      @select="onSelect"
      @progress="onProgress"
      @success="onSuccess"
      @fail="onFail"
    ></uni-file-picker>
  </view>
</template>

  2. 配置参数

    • v-model：绑定已选文件列表（数组格式）。
    • file-mediatype：文件类型，可选 image（默认）/video/all。
    • limit：最大选择数量（默认 9）。
    • title：选择按钮的标题文字。

  3. 事件监听

    • @select：文件选择后触发，返回临时文件路径。
    • @progress：上传进度变化时触发。
    • @success：上传成功时触发。
    • @fail：上传失败时触发。

示例代码

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 选择文件
    onSelect(e) {
      console.log('选择文件：', e.tempFilePaths)
    },
    // 上传进度
    onProgress(e) {
      console.log('上传进度：', e.progress)
    },
    // 上传成功
    onSuccess(e) {
      console.log('上传成功：', e)
    },
    // 上传失败
    onFail(e) {
      console.log('上传失败：', e)
    }
  }
}
</script>

注意事项

  • 需要配置 uni.uploadFile 实现上传（组件仅负责前端选择）。
  • 安卓平台部分机型需动态申请存储权限。
  • 可通过 ref 调用组件方法，如 clearFiles()。

通过以上步骤即可快速集成文件选择功能。

回到顶部