type
status
date
slug
summary
tags
category
icon
password
📝 前端实现文件拖拽+上传+进度条
前景
在我们日常的工作中，文件上传是一个很常见的功能，文件上传说简单也简单，说它复杂也可以很复杂，比如说我们实现一个原生的上传组件我们只需设置一个<input type='file' />，通过input的onchange事件就能拿到我们文件数据然后通过FormData传到后端就完成了一个简单的上传功能，如果要严谨一点可以在文件上传时我们可以对它做一些文件大小、格式等校验，或者我们也可以通过给它添加拖拽上传、进度条显示等，再复杂的话涉及到大文件上传的话，我们可以切片上传，网络不好可以通过断点续传，为了防止上传时出现阻塞主进程的现象我们可以利用React 中fiber架构的思想，利用浏览器空闲的时间计算并上传文件等等...
整个项目是基于Umijs+React搭建的，后台是用Eggjs+mongoose
上传页面
首先我们用一个
div简单包裹我们input上传组件，我们给div添加拖拽等事件，当用户拖拽文件到div容器里时，我们给边框加个红色，离开或者鼠标松开时，边框变成正常的颜色，这样我们就有一个简单的动态效果，然后我们既可以通过拖拽事件来上传文件，也可以通过点击上传按钮选择上传自定义监听
监听拖拽的事件，因为我们用的是函数组件，这里也会使用函数组件的方式去写我们的监听事件
上传进度条
我们这里用的是antd 中的Progress组件，关于上传进度计算，我们这里用到的是axios中的post请求中有一个自带的方法可以计算我们上传文件的进度，叫做onUploadProgress,我们可以直接拿来用
完整代码
- 作者:NotionNext
- 链接:https://tangly1024.com/article/29ff2a43-1d32-42b7-9386-710a1732d720
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。