--- theme: juejin highlight: arduino-light --- 本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。文件上传是最常见的一种业务需求，上传功能可简单，可复杂，简单就是把文件传上去就行，复杂就是涉及大文件断点续传、控制并发等，不知道大家对上传都了解多少。今天要给大家分享的是上传需求中最为常见的一些场景，话不多说，开干： ### 拖拽上传拖拽上传涉及到样式交互、文件信息获取，那么，我们首先了解一下拖拽相关的几个事件： 1. dragover - 被拖动的对象进入目标容器时触发 2. dragleave - 被拖动的对象离开目标容器时触发 3. drop - 被拖动的对象进入目标容器，释放鼠标键时触发了解了这几个事件，再实现拖拽上传就相当容易了。先上效果图： #### 效果展示 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d785f86b41a040969984bde1e67ed22f~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/316b9e4d1c4a454f93b902a23fa99555~tplv-k3u1fbpfcp-watermark.image?) 当被拖动的对象进入目标容器时，容器边框变红。当拖出目标容器，或者释放鼠标键时，容器边框置灰。当释放鼠标键时，获取拖动对象的文件信息。 #### 代码实现 ``` ``` ### 上传进度条进度条可以说是最普遍的一种需求，特别是大文件上传的时候。实现方法也比较简单，利用 axios 的 `onUploadProgress` 方法就可以了。 #### 效果展示 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/800719aa93c342afb7c09905ec336242~tplv-k3u1fbpfcp-watermark.image?) #### 代码实现 ```

``` ### 取消上传当上传很慢等的捉急时，或者手一抖，上传了一个不该上传的视频（你懂的），在上传未完成的情况下，能否进行取消呢？答案当然是可以的。 #### 效果展示 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37458090086a4e8b88ab2f22d9dc1653~tplv-k3u1fbpfcp-watermark.image?) 其实取消上传就是取消 *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* 还有众多实用的配置选项，大家可以自己研究一哈。欢迎在评论区留言，掘金官方将在[掘力星计划](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")活动结束后，在评论区抽送100份掘金周边。如果文章对你有所帮助，不要忘了点个赞呦~ 听说喜欢点赞的人运气都不差，相信今年的你一定逢考必过，逢奖必中😘