更新记录

1.1.8（2026-03-19） 下载此版本

优化标题样式

1.1.7（2026-03-19） 下载此版本

增加： 1、readonly时预览 2、pdf可以预览。

1.1.6（2026-01-24） 下载此版本

优化标题位置。

平台兼容性

uni-app(4.33)

jx-file-picker

基于uni-file-picker组件的增强版本，支持文件大小限制、标题控制等功能。

功能特点

• 保留官方所有原有功能
• 支持文件大小限制（size属性）
• 支持控制标题显示（showTitle属性）
• 支持自定义标题后缀（title属性）
• 文件大小单位为MB
• 支持PDF文件预览（H5、App、小程序、Web）

属性说明

只读模式说明

当设置 readonly="true" 时，组件进入只读模式：

隐藏的内容

• 标题区域（文件大小限制提示）
• 文件计数（如"0/9"）
• "选择文件"按钮
• 删除按钮

保留的内容

• 文件列表展示
• PDF 预览按钮（仅对 PDF 文件显示）

使用示例

<!-- 只读模式：仅展示文件列表 -->
<jx-file-picker
  :readonly="true"
  :value="fileList"
  file-mediatype="all">
</jx-file-picker>

## PDF预览功能

本组件支持PDF文件的直接预览功能，支持以下平台：

### 支持平台
- **H5/Web**: 在新窗口中打开PDF文件
- **App (iOS/Android)**: 调用系统PDF阅读器或第三方应用打开
- **小程序**: 自动下载后使用 `uni.openDocument` API打开PDF

### 使用方法

```html
<!-- 选择PDF文件并支持预览 -->
<jx-file-picker
  file-mediatype="all"
  file-extname="pdf"
  :size="10">
</jx-file-picker>

<!-- 选择所有文件类型，PDF可预览 -->
<jx-file-picker
  file-mediatype="all"
  :size="5">
</jx-file-picker>

<!-- readonly模式下仅展示文件，PDF文件名可点击预览 -->
<jx-file-picker
  :readonly="true"
  v-model="fileList"
  file-mediatype="all">
</jx-file-picker>

预览方式说明

• PDF文件名会显示为蓝色且带下划线，表示可点击
• 点击PDF文件名即可预览
• 非PDF文件的文件名为灰色，不可点击预览
• H5和Web环境会在新标签页中打开PDF
• App环境会调用本地PDF阅读器
• 小程序环境会先下载文件再打开

数据格式支持

组件支持以下文件数据格式：

// 格式1：HTTP URL
{
  name: 'xxx.pdf',
  url: 'https://example.com/xxx.pdf'
}

// 格式2：云存储地址（自动转换）
{
  name: 'xxx.pdf',
  fileID: 'cloud://xxx',
  url: ''
}
// 组件会自动将 cloud:// 转换为可访问的 HTTP URL

// 格式3：本地路径（仅App支持）
{
  name: 'xxx.pdf',
  path: '/static/xxx.pdf'
}

注意事项

• 小程序环境：需要在 manifest.json 中配置下载域名白名单
• 云存储文件：组件会自动将 cloud:// 地址转换为 HTTP URL，转换失败时会在预览时重试
• Blob URL：blob: 开头的本地临时地址在小程序中无法预览，建议重新上传
• 权限配置：确保 uniCloud 已正确配置，且云存储文件可访问

使用方法

基础用法

<!-- 限制文件大小为1MB -->
<jx-file-picker
  :size="1"
  file-mediatype="all">
</jx-file-picker>

使用标题后缀

<!-- 显示提示："文件必须小于0.5MB，高度100宽度100" -->
<jx-file-picker
  :size="0.5"
  title="高度100宽度100"
  file-mediatype="all">
</jx-file-picker>

隐藏标题

<!-- 不显示任何标题 -->
<jx-file-picker
  :size="2"
  :showTitle="false"
  file-mediatype="all">
</jx-file-picker>

控制上传loading

<!-- 显示上传loading（默认行为） -->
<jx-file-picker
  :size="2"
  :showUploadLoading="true"
  file-mediatype="all">
</jx-file-picker>

<!-- 隐藏上传loading -->
<jx-file-picker
  :size="2"
  :showUploadLoading="false"
  file-mediatype="all">
</jx-file-picker>

完整示例

<jx-file-picker
  :limit="2"
  :size="0.1"
  :showTitle="false"
  :showUploadLoading="true"
  title="高度100宽度100"
  :image-styles="{ width: '80px', height: '80px' }"
  :dir="pages_list.updir">
</jx-file-picker>

注意事项

• 当size值小于1024时，单位为MB
• 当size值大于等于1024时，单位为字节
• 当size为0时，表示不限制文件大小
• 当showTitle为false时，整个标题区域将不显示
• 当showUploadLoading为false时，不显示上传状态loading
• title内容会作为后缀追加到基础提示文字后