uni-app uni-file-picker组件按官方文档添加file-extname=".pdf"后缀校验后，get接口返回undefined及空白文件

uni-app uni-file-picker组件按官方文档添加file-extname=".pdf"后缀校验后，get接口返回undefined及空白文件

示例代码：

<uni-file-picker  
   ref="upload"  
   class="upload-picker"  
   v-model="files"  
   fileMediatype="all"  
   limit="1"  
   mode="grid"  
   file-extname=".pdf"  
   [@select](/user/select)="onSelectFile"
>

操作步骤：

如上代码，uni-file-picker添加fileMediatype=“all”，file-extname=".pdf"，通过@select拿不到文件内容，而且自己get了一个undefined的接口（这个接口不是我任何请求）

预期结果：

tempFilePaths拿到用户选择的文件

实际结果：

tempFilePaths为空的数组

bug描述：

vue项目使用uni-file-picker组件，根据文档添加文件后缀校验，file-extname=".pdf"。选择文件时确实只让用户选择pdf类型的文件。但是选取文件后，通过控制台看到会先get一个莫名其妙的接口（这个接口不是我任何请求）

此时通过[@select](/user/select)拿到的tempFilePaths是空的数组。当我把file-extname=".pdf"去掉后，就又能拿到正确的文件了。



| 信息类别       | 详细信息            |
|----------------|---------------------|
| 产品分类       | uniapp/H5           |
| PC开发环境     | Windows             |
| PC开发环境版本 | 20H2                |
| 浏览器平台     | Chrome              |
| 浏览器版本     | 版本 96.0.4664.45（正式版本） （64 位） |
| 项目创建方式   | CLI                 |
| CLI版本号      | [@vue](/user/vue)/cli 4.5.11     |

更多关于uni-app uni-file-picker组件按官方文档添加file-extname=".pdf"后缀校验后，get接口返回undefined及空白文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

file-extname=”.pdf“ 应为 file-extname=”pdf“ ，不要 .

更多关于uni-app uni-file-picker组件按官方文档添加file-extname=".pdf"后缀校验后，get接口返回undefined及空白文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 file-extname 属性在 H5 平台上的实现机制导致的。当设置了 file-extname 后，组件会通过修改 <input type="file"> 的 accept 属性来限制文件选择类型。但在某些浏览器环境下，这种限制可能会导致文件选择后的处理流程异常。

解决方案：

  1. 移除 file-extname 属性，在 @select 事件中手动校验：
onSelectFile(e) {
  const file = e.tempFiles[0]
  if (!file.name.toLowerCase().endsWith('.pdf')) {
    uni.showToast({ title: '请选择PDF文件', icon: 'none' })
    return
  }
  // 处理有效文件
}
  1. 如果必须使用 file-extname，可以尝试以下变通方案：
<uni-file-picker
  ref="upload"
  v-model="files"
  fileMediatype="all"
  limit="1"
  mode="grid"
  :file-extname="isH5 ? '' : '.pdf'"
  @select="onSelectFile"
>

export default {
  data() {
    return {
      isH5: false
    }
  },
  onLoad() {
    // 判断平台
    this.isH5 = uni.getSystemInfoSync().platform === 'h5'
  }
}
回到顶部