????????最近項目中需要用到上傳組件虐先,導入人員信息,導入文件是一個zip壓縮包钙皮,上傳成功后定時調用接口查詢導入過程并在前端顯示出進度條辫愉,進度條結束后告訴用戶導入成功
界面圖片
? ? ? ? 同時前端需要對用戶上傳文件的格式大小進行限制
ElementUI鉤子函數(shù)及屬性
上傳組件el-upload
因為要在提交前通過彈框提示用戶重復數(shù)據(jù)將被覆蓋,因此需要通過將auto-upload設置為false阻止組件自動上傳文件族铆,在彈框提示后岩四,用戶點擊確定時通過this.$refs.upload.submit()來上傳用戶已經(jīng)提交的文件
對上傳文件進行校驗
代碼寫完之后測試時發(fā)現(xiàn)一個問題,導入時ajax請求發(fā)出去了但是后端返回了非法Token骑素,發(fā)現(xiàn)是ElementUI的上傳是組件內的上傳炫乓,是不走axios的,因此axios攔截request并添加token的方法是不生效的献丑,然后在官方文檔發(fā)現(xiàn)了headers這個屬性,只要取出token放進去就可以了