解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題
elementui上傳組件el-upload無(wú)法第二次上傳
無(wú)需上傳服務(wù)器的文件取消或者再次上傳時(shí)失效的問(wèn)題
<el-upload class="upload-demo" ref="upload" drag action="" :limit="1" accept=".csv" :show-file-list="false" :before-upload="onClickCsvBeforeupload"> ?? ?<i class="el-icon-upload"></i> ?? ?<div class="el-upload__text">點(diǎn)這，或者拖到著</em></div> </el-upload>
在組件中添加ref="upload"屬性，無(wú)法第二次上傳，主要原因是瀏覽器還保存著，我們已經(jīng)上傳的文件（無(wú)論你是否符合你的要求）。
敲黑板?。。。?/strong>
this.$children[0].$children[0].$refs.upload.clearFiles();
主要是我們沒有清除文件造成的，可以根據(jù)你的項(xiàng)目，用Document找到refs，然后參照上面的做法就可以再次上傳了。困擾了我好久的問(wèn)題，希望能幫到你。
el upload組件 第二次上傳請(qǐng)求無(wú)效，非clearFiles方法
開發(fā)時(shí)遇到一個(gè)業(yè)務(wù)需求：
導(dǎo)入時(shí)如果當(dāng)前列表月份存在數(shù)據(jù)將會(huì)提示用戶是否要覆蓋當(dāng)前數(shù)據(jù)，點(diǎn)擊確定進(jìn)行二次提交
直接調(diào)用 submit 會(huì)無(wú)響應(yīng)
this.$confirm(`${response.msg},是否繼續(xù)？`, '提示', {
confirmButtonText: 確定,
cancelButtonText: 取消,
type: 'warning'
}).then((res) => {
// 直接提交會(huì)無(wú)響應(yīng)
this.$refs.upload.submit();
}).catch(() => {})查詢其他資料會(huì)發(fā)現(xiàn) 大多數(shù)會(huì)讓你 調(diào)用
this.$refs["upload"].clearFiles()
這樣的話會(huì)讓用戶重新添加，那么如何去節(jié)省該步驟呢？
當(dāng)?shù)谝淮紊蟼鞒晒蠡卣{(diào) on-success 方法 可以獲取到上傳的文件，這時(shí)可以進(jìn)行保存
觀察el-upload組件源碼會(huì)發(fā)現(xiàn)存儲(chǔ)文件的字段是 uploadFiles
el-upload組件部分源碼：
因此可以自行調(diào)用該方法，去主動(dòng)觸發(fā)handleStart()方法進(jìn)行上傳
最后貼上正確步驟
this.$confirm(`${response.msg},是否繼續(xù)？`, '提示', {
confirmButtonText: 確定,
cancelButtonText: 取消,
type: 'warning'
}).then((res) => {
// 先刪除
this.$refs["upload"].clearFiles()
this.$nextTick(() => {
// 再導(dǎo)入
this.$refs["upload"].handleStart(this.fileList[0].raw)
this.isUpdateSupport = 1
// 再提交上傳
this.$refs.upload.submit();
})
}).catch(() => {})User-agent: * Disallow: /
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下2024-01-01
uniapp寬屏開發(fā)PC端方案及衍生問(wèn)題解決辦法
在uniapp中進(jìn)行寬屏開發(fā),主要是指在電腦端(PC端)使用寬屏顯示效果進(jìn)行應(yīng)用的開發(fā),這篇文章主要給大家介紹了關(guān)于uniapp寬屏開發(fā)PC端方案及衍生問(wèn)題解決辦法,需要的朋友可以參考下2024-03-03
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
用官網(wǎng)的一句話來(lái)說(shuō)：Pinia?是?Vue的專屬狀態(tài)管理庫(kù)，Pinia就是為vue3而生。本文將通過(guò)一些示例詳細(xì)介紹一些Pinia的使用，希望對(duì)大家有所幫助2022-11-11
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器
這篇文章主要介紹了Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
下面小編就為大家分享一篇vue.js,ajax渲染頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue使用vue-drag-resize生成懸浮拖拽小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04