uniapp uni.choosefile的使用方法

在uniapp中使用uni.choosefile时遇到几个问题：

  1. 如何限制用户只能选择特定类型的文件（如图片或PDF）？
  2. 选择的文件大小有限制吗？最大支持多少？
  3. 在H5和微信小程序端的使用方法是否有差异？
  4. 选择文件后如何获取文件的本地路径以便上传？
  5. 能否实现多文件同时选择？需要如何配置？
2 回复

uniapp中uni.chooseFile用于选择文件，支持图片、视频等类型。用法：

uni.chooseFile({
  count: 1, // 选择数量
  type: 'image', // 文件类型
  success: (res) => {
    console.log(res.tempFilePaths) // 临时文件路径
  }
})

注意：H5端需自行处理文件上传。


在 UniApp 中，uni.chooseFile 用于从设备选择文件（如图片、文档等），常用于上传功能。以下是详细使用方法：

基本语法

uni.chooseFile({
  count: 1, // 可选文件数量，默认 9
  type: 'all', // 文件类型：all/image/video
  success: (res) => {
    console.log(res.tempFiles); // 返回选中的文件列表
  },
  fail: (err) => {
    console.error(err);
  }
});

参数说明

  • count：最多可选文件数（支持 1-9）
  • type：文件类型
    • all：所有类型
    • image：仅图片
    • video：仅视频
  • success：成功回调，返回 tempFiles 数组，包含文件临时路径、大小、名称等

示例代码

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
  </view>
</template>

<script>
export default {
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 3,
        type: 'image',
        success: (res) => {
          res.tempFiles.forEach(file => {
            console.log('文件路径:', file.path);
            console.log('文件大小:', file.size);
          });
          // 可在此调用上传接口
        },
        fail: (err) => {
          uni.showToast({ title: '选择失败', icon: 'none' });
        }
      });
    }
  }
}
</script>

注意事项

  1. 返回的为临时路径，可直接用于上传或预览
  2. H5 端支持 count>1，部分安卓设备可能限制单选
  3. 微信小程序需在 uni.chooseFile 前调用 uni.chooseMessageFile

适用场景

  • 头像上传
  • 多图上传
  • 文件提交功能

通过以上方法即可快速实现文件选择功能。

回到顶部