layui修改源码使其多文件上传组件可以支持一次请求批量上传文件

一直都在用layui,好处不多说,是因为layui简洁易写,并且后台大多数组件都有,很省事,但最近在工作的时候,发现layui的上传组件很让人蛋疼,话不多说,先看问题:
layui修改源码使其多文件上传组件可以支持一次请求批量上传文件_第1张图片
使用layui的多文件上传时,发现layui的实现逻辑是这样的:比如我要上传100个文件,设置好上传地址后,会通过内部的ajax,调用100次请求,每个请求都会重复上传我在传文件时附加的参数,很多余的重复。之前的项目中没发现这种做法有何不可,只要在写后端代码时,按单文件处理就好。
但是如果我要上传的这100个文件中,每个文件互相都有关系,并且每个文件都涉及到数据库的多个表的增加,像这种类似事务的处理,如果不能把所有文件一起上传,那会处理的相当麻烦,会徒增很多判断,并且服务端接收一个请求会开启一个线程,尽管多线程上传更快,但也会增加判断的难度

犹豫了一下,觉得还是不想换插件,第一是因为已经写好了,第二是因为使用了这么久的layui,不相信没有人考虑到。于是上fly社区查看类似的问题,发现确实是有人发现这个问题,但没有得到很好的解决:

下面是我解决这个问题所修改的源码文件:
layui修改源码使其多文件上传组件可以支持一次请求批量上传文件_第2张图片
比较一下,第一张图片是源码,第二张是我修改过的:
layui修改源码使其多文件上传组件可以支持一次请求批量上传文件_第3张图片

原理很简单,upload.js会把formData里的file以及虽文件上传的参数,循环读取其中一个文件,利用layui.each函数,在循环中实现ajax的调用,地址为你设置的地址,然后在success成功调用后,做一些处理,包括把文件index加1等等(便于之后的列表中删除上传成功的文件)。那明白原理之后,我们的实现思路就是:通过layui.each函数,把这些文件共有的通用信息,比如附带的自己添加的信息单独处理,然后把这些信息附加到文件之后(以&a=1这种方式),最后只调用一次ajax请求,这样就实现了一次请求批量上传文件。

当然,修改过后,多文件上传时就不能获取到每个文件的信息了,比如layi封装哈好的回调里的参数都不能获取。
大家可以改下源码打个断点,这样就知道那些是回调的参数了。

因为是一次上传,所以第一服务端需要设置成Reqeust文件的大小,第二,尽量不要上传太多文件,否则不是多个线程处理的话,上传速度会受影响

你可能感兴趣的:(layui,layui,源码修改,多文件上传,一次请求)