el-upload清空文件列表

1,100 阅读1分钟

问题:使用el-uplaod组件开发过程中,有的时候再次上传文件时,上次上传成功的文件会保留在el-upload的上传列表中
解决:在使用elementplus的upload上传组件的时候遇到一个问题,发现使用ref声明的数组(上传文件列表)与upload组件绑定之后无法使用常规方法手动清空,无论是重新赋值空数组还是将length赋值为0都不行,去官网看了一下发现组件本身提供了一个方法用于清空数组。 5RRuOvGLc7.png 在我的项目中是这样使用的:
1.在 el-upload 组件上添加 ref 属性

           <el-upload
              ref="adModel"
              action=""
              :auto-upload="false
              v-show="!fileName"
            >
              <div>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              </div>
              <template #tip> </template>
           </el-upload>

2.通过ref获取组件实例调用clearFiles方法

const adModel = ref(null);
adModel.value.clearFiles();

我的这个组件之前写的是v-if="!fileName",调用时会出错,我不太常用ref,这里需要注意ref 本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的,所以后来我改成了v-show