uniapp choosefile如何使用

在uniapp中如何使用chooseFile选择文件？我尝试了官方文档的方法但一直报错，无法正确调起文件选择界面。具体需求是：需要在H5和微信小程序平台上实现多文件选择功能，但不知道如何兼容不同平台。请问正确的API调用方式是什么？是否需要配置额外的权限或参数？希望能提供一个完整的示例代码。

2 回复

uniapp中使用uni.chooseFile选择文件，示例代码：

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

支持选择图片、视频等文件类型，返回临时路径用于上传。


在 UniApp 中，选择文件通常使用 uni.chooseFile API。它允许用户从设备中选择一个或多个文件（如图片、视频、文档等）。以下是基本使用方法：

代码示例

uni.chooseFile({
  count: 1, // 可选文件数量，默认 1
  type: 'all', // 文件类型：'all'（全部）、'image'（图片）、'video'（视频）、'file'（其他文件）
  success: (res) => {
    console.log('选择的文件信息：', res.tempFiles);
    // res.tempFiles 包含文件临时路径、名称、大小等信息
  },
  fail: (err) => {
    console.error('选择文件失败：', err);
  }
});

参数说明

  • count：最多可选文件数（H5 端部分浏览器可能不支持多选）。
  • type：文件类型筛选。
  • success：成功回调，返回 tempFiles 数组，包含文件临时路径（tempFilePath）等。

注意事项

  1. 平台差异：H5 端支持较差，部分浏览器可能限制文件类型或数量。
  2. 临时路径：返回的路径为临时路径，如需长期保存需调用 uni.saveFile（仅小程序端支持）。
  3. 文件上传：获取临时路径后，可通过 uni.uploadFile 上传至服务器。

扩展用法

选择多张图片并上传示例：

uni.chooseFile({
  count: 3,
  type: 'image',
  success: (res) => {
    res.tempFiles.forEach(file => {
      uni.uploadFile({
        url: 'https://example.com/upload',
        filePath: file.tempFilePath,
        name: 'file',
        success: (uploadRes) => {
          console.log('上传成功');
        }
      });
    });
  }
});

根据需求调整参数即可。

回到顶部