如何實現拖拽上傳、上傳進度條,以及取消上傳?
theme: juejin highlight: arduino-light
本文已參與「掘力星計劃」,贏取創作大禮包,挑戰創作激勵金。
文件上傳是最常見的一種業務需求,上傳功能可簡單,可複雜,簡單就是把文件傳上去就行,複雜就是涉及大文件斷點續傳、控制併發等,不知道大家對上傳都瞭解多少。今天要給大家分享的是上傳需求中最為常見的一些場景,話不多説,開幹:
拖拽上傳
拖拽上傳涉及到樣式交互、文件信息獲取,那麼,我們首先了解一下拖拽相關的幾個事件:
- dragover - 被拖動的對象進入目標容器時觸發
- dragleave - 被拖動的對象離開目標容器時觸發
- drop - 被拖動的對象進入目標容器,釋放鼠標鍵時觸發
瞭解了這幾個事件,再實現拖拽上傳就相當容易了。先上效果圖:
效果展示
當被拖動的對象進入目標容器時,容器邊框變紅。當拖出目標容器,或者釋放鼠標鍵時,容器邊框置灰。當釋放鼠標鍵時,獲取拖動對象的文件信息。
代碼實現
```
```
上傳進度條
進度條可以説是最普遍的一種需求,特別是大文件上傳的時候。實現方法也比較簡單,利用 axios 的 onUploadProgress
方法就可以了。
效果展示
代碼實現
```
```
取消上傳
當上傳很慢等的捉急時,或者手一抖,上傳了一個不該上傳的視頻(你懂的),在上傳未完成的情況下,能否進行取消呢?答案當然是可以的。
效果展示
其實取消上傳就是取消 ajax 請求,可以利用 axios 的
cancel token
進行取消。
方法一:使用 CancelToken.source
工廠方法創建 cancel token
``` const CancelToken = axios.CancelToken; const source = CancelToken.source();
axios.post('/upload', form, { cancelToken: source.token })
source.cancel();
``
方法二:通過傳遞一個 executor 函數到
CancelToken的構造函數來創建
cancel token`
``` const CancelToken = axios.CancelToken; let cancel;
axios.post('/upload', form, { cancelToken: new CancelToken(function executor(c) { cancel = c; }) });
cancel(); ``` 有興趣的同學可以試一試,將以上方法融入到自己的項目中。
總結
ok,以上就是上傳需求中最常見的一些場景,無論是拖拽上傳還是粘貼上傳,最主要的是通過相應的事件拿到文件信息。而進度條和取消上傳則是利用 axios 的 api 進行實現,axios 還有眾多實用的配置選項,大家可以自己研究一哈。
歡迎在評論區留言,掘金官方將在掘力星計劃活動結束後,在評論區抽送100份掘金周邊。如果文章對你有所幫助,不要忘了點個贊呦~
聽説喜歡點讚的人運氣都不差,相信今年的你一定逢考必過,逢獎必中😘
- Vite 性能篇:掌握這些優化策略,一起縱享絲滑!
- Vite 配置篇:日常開發掌握這些配置就夠了!
- Vite 入門篇:學會它,一起提升開發幸福感!
- 還有人沒嘗過 Pinia 嗎,請收下這份食用指南!
- 10個常見的使用場景,助你從 Vue2 絲滑過渡到 Vue3 !
- 前端手寫功能第二彈,提升內力,等待下一次爆發!
- 效率提升之 —— 如何優雅的帶走上份工作的VSCode配置
- Vue組件遞歸——組件化開發的必備技能!
- 10個常用的JS工具庫,80%的項目都在用!
- 如何嚴格判斷文件上傳類型?再不會你就out啦!
- Element-UI 奇淫技巧第二彈!提升開發效率,延長摸魚時間~
- 原來虛擬列表如此簡單!萬萬沒想到
- 10個常見的前端手寫功能,你全都會嗎?
- 一款強大到沒朋友的圖片編輯插件,愛了愛了!
- 如何實現拖拽上傳、上傳進度條,以及取消上傳?
- Vue 1分鐘實現右鍵菜單,懶人的福音!
- Vue 如何快速實現頭像裁剪?方法比你想象的簡單
- 前端持久化之瀏覽器存儲技術(localStorage、sessionStorage 、session、cookies)