layui-upload文件上传后清空以上传的文件跟选择文件后清空上一次选择的文件

其实很简单的,只是看到网上没有能用的解决方法,所以把代码贴一下,希望能帮助有需要的同志

解决思路就是在回方法 choose 中 通过  UPLOAD_FILES = obj.pushFile(); 将它的返回值用一个变量存起来, 在文件上传成后把UPLOAD_FILES 这个变量里的文件全部删除, 因为我找了一下 layui 的文件上传好像没有提供可以获取所有文件的api方法, 只能通过这种方式获取了,当然大神可以去翻源码, 肯定是有其它方法可以获取全部文件的. 只是我懒得去找.

同理选择文件后将上一次选择的文件删除也一样, 因为用户选择文件时肯定会选择错, 如果不将上一次选择的文件删除的话就会导致文件队列里有多个文件,同而上传多次(我是指一次只能上次一个文件的情况下, 如用户选择头像之类的)

在这种情况也是一样,进入choose方法时不管它三七二十一,先把所有的文件删除再说,然后再当前文件pushFile()进去就可以了

 

 

let UPLOAD_FILES; let upload = layui.upload.render({ elem: '#selected', url: '/uploadCloud/', auto: false, number: 1, size: 1024 * 5, acceptMime: 'image/*', choose: function (obj) { //这里的文件加入队列有点多余,但只能通过这种方式才能拿到所有文件的队列, //谁让这插件没提供相关的api呢 UPLOAD_FILES = obj.pushFile(); clearFile(); //将所有文件先删除再说 obj.preview(function (index, file, result) { $('#selected').attr('src', result); obj.pushFile(); 再把当前文件重新加入队列 }); },done: function(res){ clearFile(); } }) //清空文件队列 function clearFile(){ for (let x in UPLOAD_FILES) { delete UPLOAD_FILES[x]; } }