Fileinput-bootstrap文件上传插件详解包括加密传

首先声明几点：

1.这篇文章必须写，网上各种网友提供了很多关于此插件的用法可以说很详细，但是，注意但是，很多都是简单使用，至于如何加密传参、插件清空、样式改变等都没有。。。所以核心的东西只能自己研究了。。。

2.Http请求GET、POST。。。各种跨域的自行百度(get不支持文件上传，但是可以配合后台直接跨域)此插件用的是POST可看源码

3.修改部分插件，上面提到的问题都会有解决

正文开始：

首先引入基础插件和汉化，注意这里我是用angular5开发的页面所以是基于webpack打包的，不用框架的童鞋直接引用就OK了但是注意一点zh.js(汉化)一定得在fileinput.js后引用(不要问我为啥，都是泪)

angular-cli.json文件：
...
scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../src/fileupload/fileinput.min.js",
"../src/fileupload/zh.js"
]
...

html页面:

 <form id="IMGForm" method="post"  enctype="multipart/form-data">
  <input id="fileupload" type="file" multiple  data-overwrite-initial="false" data-min-file-count="1">
          </form>

TS代码:
清除插件选择的文件,这个很蛋疼，作者并没有明确提供用代码清除选择文件的方法，只能在页面上手动清除，用户上传成功之后还得手动清除，体验很不好，所以看源码研究一下，如此解决
里面有一个需要和后台对应上的文件协商名,后台List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("FileUpload")
在fileinput.js中查找('file_data')替换为"FileUpload"就OK
感兴趣的童鞋可以看看这个插件的中文文档(当然官网最好http://plugins.krajee.com/file-input)
https://blog.csdn.net/u012526194/article/details/69937741

//里面有一个需要和后台对应上的文件协商名,后台List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("FileUpload") 
  在fileinput.js中查找('file_data')替换为"FileUpload"就OK
//清除插件选择的文件,这个很蛋疼，作者并没有明确提供用代码清除选择文件的方法，只能在页面上手动清除，用户上传成功之后还得手动清除，体验很不好，所以看源码研究一下，如此解决
 clearFileInput(){
    $('#fileupload').fileinput('clear')
   }
URL:string="http://xxx/upload.do"
LOCK:boolean=false;//请求锁 下面会用到
 ngOnInit() {//初始化,相当于jquery的 $(document).ready(function () {}
        let that=this;//this外引
        $("#fileupload").fileinput({
            language:'zh',//指明插件汉化
            uploadUrl: that.URL,//后台地址
            allowedFileExtensions: ['jpg', 'png', 'gif'],//允许上传文件的类型
            overwriteInitial: false,//设置是否覆盖原有的已上传项
            maxFileSize: 1000,//单位为kb，如果为0表示不限制文件大小
            maxFileCount: 10,//最大文件数
            uploadAsync:false,//是否同步 同步就是一个post解决否则会请求多个post
            uploadExtraData: function (previewId, index) {//这个方法里添加请求附带的参数json格式，这里我用了加密的参数
                if(!that.LOCK){
                    that.LOCK=true;//如果没锁就锁着
                    that.DAEMap=that.encodeParam();//加密参数(userId,username...)
                }else{
                    console.log("LOCK-->uploadExtraData");
                }
                return  that.DAEMap['param'];//返回加密后的参数
            },
            slugCallback: function (filename) {//选择文件后会吊起这个方法
                that.LOCK=false;//为啥在这里释放锁,试试就知道
                console.log(filename);//打印文件名字
                return filename.replace('(', '_').replace(']', '_').replace(' ','');//替换文件名中的字符
            }
        }).on("fileuploaded", function (event, data) {//
           //异步上传成功后唤起的方法
        }).on("filebatchuploadsuccess",function(event, data, previewId, index){//同步上传成功后唤起的方法
            alert("图片上传成功!");
            console.log("清空");
            that.clearFileInput();//清空插件
            data=data.response;//获取后台返回数据
           let result = JSON.parse(that.DAEService.decryptBy3DES(data.data, DAEObj['key'])//解密后台返回数据
            console.log(result);
            that.DAEMap={};
            
        }).on('filebatchuploaderror',function(event, data, msg){//上传失败唤起方法
            console.log(event);
            console.log(data);
            console.log(msg);
            alert("文件上传出错!请重试");
            that.clearFileInput();
           // that.LOCK=false;
        });
    };

这里需要指出的是uploadExtraData方法会在很多情况下唤起，所以这里我们使用的是RSA+DES3加密，会造成秘钥混乱，所以我们这里加了一个锁LOCK，解锁的地方也很特殊，大家可以尝试一下

感兴趣的童鞋可以看看这个插件的中文文档(当然官网最好http://plugins.krajee.com/file-input)
https://blog.csdn.net/u012526194/article/details/69937741