uni-app uni-file-picker 的 clearFiles 方法调用了没反应

uni-app uni-file-picker 的 clearFiles 方法调用了没反应

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | win11  | HBuilderX     |

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：4.63

手机系统：Android

手机系统版本号：Android 15

手机厂商：华为

手机机型：hw

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<uni-file-picker v-if="field.type === 'upload'" v-model="formData[key]" :limit="field.limit || 9"  
ref="e => FilePicker[key] = e" [@delete](/user/delete)="e => deleteFile(e, key)" [@select](/user/select)="e => uploadFile(e, key)"
      mode="grid" />  

<p>const FilePicker = reactive({})  </p>
<pre><code>    FilePicker[key]?.clearFiles(e.index)</code></pre>

操作步骤：

<uni-file-picker v-if="field.type === 'upload'" v-model="formData[key]" :limit="field.limit || 9"  
ref="e => FilePicker[key] = e" [@delete](/user/delete)="e => deleteFile(e, key)" [@select](/user/select)="e => uploadFile(e, key)"
      mode="grid" />  

<p>const FilePicker = reactive({})  </p>
<pre><code>    FilePicker[key]?.clearFiles(e.index)</code></pre>

预期结果：

<uni-file-picker v-if="field.type === 'upload'" v-model="formData[key]" :limit="field.limit || 9"  
ref="e => FilePicker[key] = e" [@delete](/user/delete)="e => deleteFile(e, key)" [@select](/user/select)="e => uploadFile(e, key)"
      mode="grid" />  

<p>const FilePicker = reactive({})  </p>
<pre><code>    FilePicker[key]?.clearFiles(e.index)</code></pre>

实际结果：

<uni-file-picker v-if="field.type === 'upload'" v-model="formData[key]" :limit="field.limit || 9"  
ref="e => FilePicker[key] = e" [@delete](/user/delete)="e => deleteFile(e, key)" [@select](/user/select)="e => uploadFile(e, key)"
      mode="grid" />  

<p>const FilePicker = reactive({})  </p>
<pre><code>    FilePicker[key]?.clearFiles(e.index)</code></pre>

bug描述：

<uni-file-picker v-if="field.type === 'upload'" v-model="formData[key]" :limit="field.limit || 9"  
ref="e => FilePicker[key] = e" [@delete](/user/delete)="e => deleteFile(e, key)" [@select](/user/select)="e => uploadFile(e, key)"
      mode="grid" />  

<p>const FilePicker = reactive({})  </p>
<pre><code>    FilePicker[key]?.clearFiles(e.index)  </code></pre>

更多关于uni-app uni-file-picker 的 clearFiles 方法调用了没反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

您好，bug描述处发的代码不全，方便发个可复现的demo吗？

更多关于uni-app uni-file-picker 的 clearFiles 方法调用了没反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的代码和问题描述，clearFiles方法调用无效可能有以下几个原因：

  1. 组件引用问题：你使用了动态ref赋值方式ref="e => FilePicker[key] = e"，但调用时使用了可选链FilePicker[key]?.clearFiles()，这可能导致组件实例未正确获取。建议先确认FilePicker[key]是否确实获取到了组件实例。

  2. 参数传递问题：clearFiles方法在不传参数时会清空所有文件，传index参数则删除指定文件。你代码中传递了e.index，但未看到e的来源定义，可能参数不正确。

  3. 响应式数据问题：FilePicker使用reactive包装，但直接存储组件引用可能存在问题。可以尝试改为const FilePicker = ref({})或直接使用普通对象。

  4. 组件状态问题：确保调用clearFiles时组件已挂载完成，可以尝试在nextTick中调用。

建议修改为：

// 确保组件实例获取正确
const FilePicker = {}

// 调用时
FilePicker[key].clearFiles()  // 不传参数清空所有
// 或
FilePicker[key].clearFiles(index) // 传具体索引
回到顶部