File Input插件----编辑逻辑成功删除后，再次添加新文件删除失效--功能交互逻辑与on事件

短篇前言

做文件和图片上传功能时，大部分是用百度的web-uploader 和 BootStarp的FileInput，
FileInput组件相关不做过多介绍，相关API请移步查阅其他网络资料。这里主要记录一些自己使用FileInput时遇到的问题和需要注意的点。

主要内容

首先，为什么会有这章短篇？
因为网络资料匮乏，在反复搭梯子、Google、以及查阅各个社区的文章后，解决了该篇中遇到的问题。也为了防止遗忘，做以记录。

公司要求做一个文件上传的功能模块儿，具体点就是新增上传图片/视频，编辑上传图片/视频。

新增时逻辑通常，无问题。
编辑时，回显后的图片可直接调用删除接口，无问题。
同时调用接口删除数据库数据与文件服务器文件，无问题。
页面插件正常删除视效，无问题。
问题是，逗留在当前页面，编辑时删除回显出来的文件后，新选文件，上传可以成功，删除不行了？？？。调试接口无问题，页面交互无问题。难道我还要重新打开一次页面不成？用户体验何在？

后来发现，原来，在fileInput插件编辑时，第一次回显的数据后的删除操作把页面元素清空了。想要再次操作页面元素时需要重新去获取。

解决思路与办法（js 第 55-65 行）

示例：
（新增时上传图片）选择图片后，点击上传（点大按钮，小按钮后面说），然后图片保存至后端，我上传成功后自动关闭了tab页所以不截图了：
新增时上传视频，三个点点里面有下载功能（插件自带的，不用自己开发），黄色的关闭按钮是自己做的，为了满足业务，大小上传按钮和图片的那个基本一样，可配置，后面说：

编辑时业务（图片的回显，新选择图片后上传和删除，原图片的删除，大小按钮的功能方式等等，均有不同，此处坑多）
图（1）图（2）

视频的同理--------------------

插件初始化

首先要引入相关的js和样式，具体请参考网络资料

页面

<div class="file-loading">
					<input id="file-1" name="file-1" type="file" multiple="true" class="file" data-overwrite-initial="false" data-min-file-count="1" data-theme="fas">
				</div>

data-min-file-count是个数
multiple="true"是提交时后台接口用@RequestParam(value = “file-1”,required = false) MultipartFile[] files这种方式接收，
注意！！！当后台项目框架不同时MultipartFile类的类型也不同，