如何實現拖拽上傳、上傳進度條，以及取消上傳？

語言: CN / TW / HK
時間 2021-10-30 22:15:25

theme: juejin highlight: arduino-light

本文已參與「掘力星計劃」，贏取創作大禮包，挑戰創作激勵金。

文件上傳是最常見的一種業務需求，上傳功能可簡單，可複雜，簡單就是把文件傳上去就行，複雜就是涉及大文件斷點續傳、控制併發等，不知道大家對上傳都瞭解多少。今天要給大家分享的是上傳需求中最為常見的一些場景，話不多説，開幹：

拖拽上傳

拖拽上傳涉及到樣式交互、文件信息獲取，那麼，我們首先了解一下拖拽相關的幾個事件：

  1. dragover - 被拖動的對象進入目標容器時觸發
  2. dragleave - 被拖動的對象離開目標容器時觸發
  3. drop - 被拖動的對象進入目標容器，釋放鼠標鍵時觸發

瞭解了這幾個事件，再實現拖拽上傳就相當容易了。先上效果圖：

效果展示

image.png image.png 當被拖動的對象進入目標容器時，容器邊框變紅。當拖出目標容器，或者釋放鼠標鍵時，容器邊框置灰。當釋放鼠標鍵時，獲取拖動對象的文件信息。

代碼實現

```

```

上傳進度條

進度條可以説是最普遍的一種需求，特別是大文件上傳的時候。實現方法也比較簡單，利用 axios 的 onUploadProgress 方法就可以了。

效果展示

image.png

代碼實現

```

```

取消上傳

當上傳很慢等的捉急時，或者手一抖，上傳了一個不該上傳的視頻（你懂的），在上傳未完成的情況下，能否進行取消呢？答案當然是可以的。

效果展示

image.png 其實取消上傳就是取消 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份掘金周邊。如果文章對你有所幫助，不要忘了點個贊呦~

聽説喜歡點讚的人運氣都不差，相信今年的你一定逢考必過，逢獎必中😘

「」
「」