以element-ui基础封装大文件上传的组件，包括断点续传，秒传，上传进度条，封装思想逻辑来源于el-upload 组件源码，看下面具体案例 看上面代码，主要分为3部分： 1、文件按钮部分，一个默认插槽加一个input框，默认插槽用来自定义上传框的样式，input大家都懂就是原生的上传框，注意这个input 是需要隐藏的，这里偷懒直接用了element的类名2、上传文件类型提示部分，一个文件类型提示的具名插槽 name="tip",用来自定义样式给出提示的文案3、已上传的文件列表，用来点击预览，删除，以及上传进度条的展示，进度条部分会有status ,是文件上传的状态，当为uploading 时渲染 接下来是js 部分，分片部分的逻辑就不在这篇文章里面赘述了。 首先看组件的props prop类型描述beforeUploadFunction(file)文件上传前钩子上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传onExceedFunction(file,fileList)文件超出个数限制时的钩子limitNumber文件限制数量uploadApiString上传文件的接口mergeApiString文件上传成功后，合并文件接口checkApiString检测文件上传分片接口，返回已上传所有片段的索引acceptString允许上传的文件类型concurrentUploadBoolean是否允许并发请求（后端服务带宽受限，可能需要同步依次上传分片，而不是瞬间发起几百个请求）fileListArray上传的文件列表, 例如: [{name: 'food.jpg', url: 'xxx.cdn.com/xxx.jpg'}]onRemoveFunction(file,fileList)文件列表移除文件时的钩子onChangeFunction(file,fileList)文件状态改变时的钩子，添加文件时调用onPreviewFunction(file)文件预览钩子onSuccessFunction(file,url)文件合并成功钩子，返回成功文件，和后端存储到S3的urlonErrorFunction(file)文件上传失败钩子onProgressFunction(file,percentage)文件上传进度钩子onReadingFileFunction(status)读取文件md5时的钩子函数，参数 start:开始读取，end：读取结束chunckSizeNumber文件切片大小requestFunction封装好的axios,用于请求的工具函数apiHeaderObject需要的特殊请求头SparkMD5Function读取文件md5的工具函数（spark-md5直接安装这个包）multipleBoolean是否可多选文件（建议不多选，大文件有瓶颈） ok 开始上传，下面我们一步步来解析 第一步选取文件 重置上一次的文件，接着主动触发input 的click事件 触发input的change事件，开始判断是否已选取文件，接着判断文件个数，如果超出限制，会直接终止当前逻辑并将文件，以及文件列表抛给父组件的onExceed 函数，父组件自行给出提示，如果未超过限制，继续执行上传逻辑执行 upload 方法, upload 方法会调用beforeUpload 方法是否符合文件类型，如果返回ture, 继续执行，开始读取大文件的md5(这里是关键) 继续看readFile方法： 首先将文件开始切片,放入切片list中，接着开始读取文件，这里可以自行在父组件中调用 onReadingFile 方法设置loading状态，提升用户体验度。 接着会直接调用服务单接口，检查是否已经上传过，并将已上传的分片序号写入到一个isUploadChuncks list中，然后循环上传未上片段，这里会执行 onStart 方法，给每个文件一个初始对象，设置文件的初始状态，以及文件内容，插入到已上传的文件列表 uploadFiles 中，为后根据文件状态展示进度条，以及上传失败时删除对应文件列表做准备 划重点：调用接口，处理上传逻辑，这里主要分两种。前面提到过，服务端会有上传带宽的限制，如果一次性发送很多的文件请求，服务端是接受不了的。所以分2种，并发上传，和同步上传。post 方法会返回一个promise,并生成了一个以每个promise请求，组成的promise 集合 通过父组件传递的concurrentUpload参数，决定是并发还是同步 uploadSuccess 为并发时逻辑，将所有的请求放入promise数组中，如果都成功进行合并文件 这里为同步，因为上面pormise如果成功resove(true),所以成功才会继续走递归发送请求，否者立马中断上传 最后就是合并文件，合并之后根据文件的MD5匹配，然后修改对应文件的status,通过状态隐藏进度条，这里成功之后会走onSuccess方法，这时可以在父组件放开上传按钮禁用的状态（看前面的逻辑，会在选择文件之后，禁用上传按钮） 最后看下在父组件中使用的案例 这里有2个状态"disabledUpload"（当文件选择后禁用上传按钮，知道上传成功放开限制）"loadingUpload"（在读取文件md5的过程中，开启loading状态）都是通过不同的钩子函数来控制 附源码git地址 代码没有精简，时间仓促，目前是使用在自己的项目中，有不完善和错误的地方，欢迎大家指出 以上就是基于element-ui自定义封装大文件上传组件的案例分享的详细内容，更多关于element-ui封装大文件上传组件的资料请关注脚本之家其它相关文章！