Element頁面內多個上傳元件 超時使用abort取消請求
看element文件可使用abort取消當前上傳圖片的請求,this.$ref.upload.abort()這種。
最近做公司後臺管理 頁面記憶體在多個上傳圖片的元件,但是可能會有上傳超時的情況,這時需要定位到是哪個存在超時情況,從而取消上傳.
<el-upload
class="avatar-uploader"
:action="apiurl"
:show-file-list="false"
:before-upload="function (file){return beforeUpload(file,'測試',this)}"
:on-success="handleAvatarSuccess"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
使用before-upload繫結函式,引數為程式碼內引數,這裡使用的this指向當前上傳圖片的元件,在函式裡接受到引數後可直接 引數.abort() 取消上傳。
相關文章
- 首頁父子組元件 ajax陣列請求各個頁面元件陣列
- webuploader在同頁面初始化多個上傳元件問題Web元件
- Vue +Element Ui 使用Upload元件實現多圖片上傳VueUI元件
- el-upload控制元件一次介面請求上傳多個檔案控制元件
- 傳送新請求,取消上一次pending狀態的同一請求
- html頁面中如何傳送ajax請求HTML
- 首頁 使用axios 傳送ajax請求iOS
- 用whistle實現Abort請求
- axios取消請求 CancelToken(如何使用)iOS
- 大請求、請求超時問題
- .NET Core使用 CancellationToken 取消API請求API
- 前端進階(2)使用fetch/axios時, 如何取消http請求前端iOSHTTP
- sendBeacon 重新整理/關閉頁面之前傳送請求
- WebForm 頁面ajax 請求後臺頁面 方法WebORM
- Vue + Element 自定義上傳封面元件Vue元件
- 【面試】Web 頁面請求歷程面試Web
- 取消Fetch API請求API
- 網路請求優化之取消請求優化
- Web Beacon 重新整理/關閉頁面之前傳送請求Web
- Vue router 使用 History 模式導致頁面請求 404Vue模式
- 封裝Vue Element的upload上傳元件封裝Vue元件
- Flutter多個頁面廣播通知傳值Flutter
- 鴻蒙HarmonyOS實戰-Web元件(請求響應和頁面除錯)鴻蒙Web元件除錯
- axios請求超時解決方案iOS
- 035.Vue3入門,使用具名插槽Slot中,同時顯示主頁面和多個插槽頁面內容Vue
- 使用Feign傳送HTTP請求HTTP
- 如何使用 request-promise 在傳送請求時使用代理ip?Promise
- crmeb系統請求介面超時,超過十秒就請求失敗
- element對上傳元件二次封裝,vue上傳下載元件的實現元件封裝Vue
- Laravel 路由匹配多個請求Laravel路由
- Vue 使用 Axios 傳送請求的請求體問題VueiOS
- SqlCommand.CommandTimeout超時使用者請求當前操作SQL
- axios原始碼分析——取消請求iOS原始碼
- axios請求超時,設定重新請求的完美解決方法iOS
- 使用Spring Boot在請求正文中上傳多個檔案,並使用Postman進行測試Spring BootPostman
- [React.js]元件解除安裝如何自動取消非同步請求ReactJS元件非同步
- nodejs使用request傳送http請求NodeJSHTTP
- Vue(二)使用Element-ui元件庫渲染後臺系統登入頁面VueUI元件