快捷導(dǎo)航

vue的Element組件上傳文件el-upload上傳成功后清空方式

更新時(shí)間：2026年02月13日 08:39:37 作者：會(huì)遲到但不會(huì)缺席

文章介紹了幾種清空文件上傳組件的方法,包括設(shè)置file-list為空數(shù)組和修改組件key,這些方法可以幫助在新增或修改時(shí)清空組件內(nèi)容,解決實(shí)際開發(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">點(diǎn)擊上傳</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">點(diǎn)擊上傳</el-button>
      </el-upload>

上傳完成后執(zhí)行清空

this.$refs.upload.clearFiles()

或者

const mainImg = this.$refs.upload
          if (mainImg && mainImg.length) {
            mainImg.forEach(item => {
              item.clearFiles()
            })
          }

如果有多個(gè)組件可以使用

file-list，可以設(shè)置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">點(diǎn)擊上傳圖片</el-button>
          </el-upload>

然后清空normal字段即可

還有種情況是需要修改組件key來(lái)實(shí)現(xiàn)清空的

timer: '',

<ImageCropping :imageUrl="companyform.imageUrl" @change="uploadHandler" imgType="imageUrl" :key="timer"/>

其中timer是需要修改的，每次新增或修改的時(shí)候修改timer的值即可

/** 新增按鈕操作 */
handleAdd() {
  this.reset()
  this.open = true
  this.timer = new Date().getTime()
  this.title = '添加信息'
},

解決了。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue車牌輸入組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue車牌輸入組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
基于Vue3編寫一個(gè)打印模板設(shè)計(jì)器(print-canvas-designer)
在業(yè)務(wù)系統(tǒng)里,標(biāo)簽打印存在一個(gè)常見弊端,它往往不是一次性的輸出功能,而是一套需要持續(xù)維護(hù)的編輯能力,本文將用 Vue3 做一個(gè)可擴(kuò)展的打印模板設(shè)計(jì)器,感興趣的小伙伴可以了解下
2026-05-05
vue項(xiàng)目中Token的使用方式
這篇文章主要介紹了vue項(xiàng)目中Token的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue-router 起步步驟詳解
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2019-03-03
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。接下來(lái)給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，感興趣的朋友一起看看吧
2016-09-09
vue-cli 環(huán)境變量 process.env的使用及說(shuō)明
這篇文章主要介紹了vue-cli 環(huán)境變量 process.env的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-09-09
Vue filter格式化時(shí)間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法
今天小編就為大家分享一篇Vue filter格式化時(shí)間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-09-09
在Vue3+ECharts中圖表tooltip不顯示問題分析和解決方法
文章主要描述了在Vue3中使用ECharts時(shí)遇到的tooltip不顯示問題,通過分析問題根源和修改方式,最終使用markRaw()工具函數(shù)解決了問題,文章詳細(xì)解釋了Vue和ECharts的工作原理以及markRaw的作用,最后提供了完整的修復(fù)代碼示例,需要的朋友可以參考下
2026-02-02
Vue中添加過渡效果的方法
本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果，有興趣的同學(xué)可以了解一下。
2017-03-03