elementUi upload 使用小結(jié)

在最近的項目里,使用了elementUI去。其中碰到了許許多多的小問題。碰到有意思的,稍微記錄一下。

項目前端基本使用Vue,后端則是傳統(tǒng)的spring接口。

upload組件

由于封裝的完整,導(dǎo)致使用中碰到許許多多的問題。
先貼代碼:
前端html:


image.png

js:


image.png
問題一、如何讓后臺接口接收?

:action="uploadUrl"這里是我的后臺的接口路徑。
:headers="headers"將token放在headers中成功


image.png

這是我的后臺接收處理


image.png

在解決問題的過程中,找了很多答案,還有一種解決方法是設(shè)置無效action,在回調(diào)中處理上傳請求。也可以實現(xiàn)效果,但是會存在上傳有兩次請求,第一次請求在console中報404錯誤。

問題二、在:before-upload="beforeAVatarUpload"返回false時,仍會觸發(fā):before-remove

本來百思不得其解,上傳回調(diào)一般是對上傳文件做一個校驗,校驗失敗,不是都不會去做上傳,怎么還要去刪除呢?
后來在官網(wǎng)仔細看看之后,我覺得可能也許是我寫錯了???


image.png
image.png

棒,沒看懂。

解決辦法:
一、在handleRemove中做判斷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,881評論 25 709
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,534評論 19 139
  • 1.Typescript中的&理解 參數(shù)中的 & 表示props對象同時擁有了TagManagementState...
    Lethe35閱讀 7,805評論 0 1
  • 世界上最昂貴的樂器就是人體與生俱來的自帶的樂器。 它們分別是人體從下往上的五個共鳴腔,胸腔、喉腔、口腔、鼻腔、頭腔...
    丹菡閱讀 1,097評論 0 12
  • 他們那的禮很重,很重 岳父岳母人很好,盡量退讓,我很感激,也盡量滿足 我視之若自己父母 我家在北,她家在南,但我與...
    何牛牛閱讀 258評論 0 1

友情鏈接更多精彩內(nèi)容