vue的Element組件上傳文件el-upload上傳成功后清空方式
更新時間：2026年02月13日 08:39:37 作者：會遲到但不會缺席
文章介紹了幾種清空文件上傳組件的方法,包括設置file-list為空數組和修改組件key,這些方法可以幫助在新增或修改時清空組件內容,解決實際開發(fā)中的問題
vue的Element組件上傳文件el-upload上傳成功后清空
<el-upload action="#" ref="upload" list-type="picture" :show-file-list="true" :limit="1" :http-request="handleUpload">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload><el-upload action="#" ref="upload" list-type="picture" :show-file-list="true" :limit="1" :http-request="handleUpload">
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>上傳完成后執(zhí)行清空
this.$refs.upload.clearFiles()
或者
const mainImg = this.$refs.upload
if (mainImg && mainImg.length) {
mainImg.forEach(item => {
item.clearFiles()
})
}如果有多個組件可以使用
file-list，可以設置file-list="[]"
<el-upload action="#" ref="upload" :file-list="normal" list-type="picture" :show-file-list="true" :limit="1" :http-request="uploadAvatarNormal">
<el-button size="small" type="primary">點擊上傳圖片</el-button>
</el-upload>然后清空normal字段即可
還有種情況是需要修改組件key來實現清空的
timer: '',
<ImageCropping :imageUrl="companyform.imageUrl" @change="uploadHandler" imgType="imageUrl" :key="timer"/>
其中timer是需要修改的，每次新增或修改的時候修改timer的值即可
/** 新增按鈕操作 */
handleAdd() {
this.reset()
this.open = true
this.timer = new Date().getTime()
this.title = '添加信息'
},解決了。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue車牌輸入組件的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
基于Vue3編寫一個打印模板設計器(print-canvas-designer)
在業(yè)務系統(tǒng)里,標簽打印存在一個常見弊端,它往往不是一次性的輸出功能,而是一套需要持續(xù)維護的編輯能力,本文將用 Vue3 做一個可擴展的打印模板設計器,感興趣的小伙伴可以了解下2026-05-05
這篇文章主要介紹了vue項目中Token的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應函數）
組件（Component）是 Vue.js 最強大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應函數的相關知識，非常不錯，感興趣的朋友一起看看吧2016-09-09
vue-cli 環(huán)境變量 process.env的使用及說明
這篇文章主要介紹了vue-cli 環(huán)境變量 process.env的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
今天小編就為大家分享一篇Vue 實現列表動態(tài)添加和刪除的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇Vue filter格式化時間戳時間成標準日期格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Vue3+ECharts中圖表tooltip不顯示問題分析和解決方法
文章主要描述了在Vue3中使用ECharts時遇到的tooltip不顯示問題,通過分析問題根源和修改方式,最終使用markRaw()工具函數解決了問題,文章詳細解釋了Vue和ECharts的工作原理以及markRaw的作用,最后提供了完整的修復代碼示例,需要的朋友可以參考下2026-02-02
本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果，有興趣的同學可以了解一下。2017-03-03