el-upload php,一次另类使用Element-UI的el-upload组件的经历

内容简介

记录了一次通过阅读Element-UI源码,利用hack手段,进入el-upload组件特定钩子的方法。

为什么要这么做?

Element-UI是一款优秀的开源项目,但它也无法满足所有的用户场景。

当无法满足的时候,我们可以选择:

自己写个组件

对element的组件进行改造

hack方式

如果有把握,方法3绝对是代价最小,而且最稳妥的。

现状是什么?

Element-UI的el-upload对文件的处理是按单文件进行的,无论你一次选中多少个文件,它都会对文件列表进行遍历,依次上传。

每一个文件都会走一遍完整的生命周期。

我的期望是什么?

因为业务需要,我需要支持一次选择/拖拽多个文件,并将多个文件封装到一个Formdata中,使用一次http(s)请求,完成多个文件的上传。

当前组件为何无法满足

上面的现状描述了el-upload的实现机制,那就决定了我无法在一个方法中,获得全部数据列表。(也不是完全不可以,在文件列表的最后一次触发是,fileList即为全部数据列表,但无法确认什么时候是最后一次)

怎么办?先读读源码吧。

以下是Element-UI中,upload组件的相关业务代码:

uploadFiles(files) { if (this.limit && this.fileList.length + files.length > this.limit) { this.onExceed && this.onExceed(files, this.fileList); return; } let postFiles = Array.prototype.slice.call(files); if (!this.multiple) { postFiles = postFiles.slice(0, 1); } if (postFiles.length === 0) { return; } postFiles.forEach(rawFile => { this.onStart(rawFile); if (this.autoUpload) this.upload(rawFile); }); }

可以看到,源码做了如下处理:当一些判断结束后,立刻开始对postFiles进行forEach,依次处理上传。

逃票了!

看到这,我很沮丧!Element-UI团队居然没有给我们留钩子!

不对!等等!

也不是完全没有钩子,对吧?

比如说上面代码里的onExceed钩子,当文件上传数量超过限制时,会直接进入该方法。而且带上了全部文件……

咦?

怎么样可以百分百进入该方法呢?

this.limit < 0 不就可以了?

解决的思路瞬间清晰:令limit = -1,那么便可以在组件的on-exceed钩子中,获取到全部的文件了!

你可能感兴趣的:(el-upload,php)