beego 前端实现多文件上传功能

https://github.com/kartik-v/bootstrap-fileinput

问题: jQuery版本冲突导致页面显示错乱

1.下载并把对应的js/css资源拷贝到beego项目中的static下

2.在view的tpl中添加引用

2.1 参考examples中的index,需要添加如下:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">

<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">

<link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="../js/plugins/sortable.js" type="text/javascript"></script>

<script src="../js/fileinput.js" type="text/javascript"></script>

<script src="../js/locales/fr.js" type="text/javascript"></script>

<script src="../js/locales/es.js" type="text/javascript"></script>

<script src="../themes/fas/theme.js" type="text/javascript"></script>

<script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>

2.2 发现会和项目中用到的jQuery冲突,遂改成如下

<link href="/static/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">

<link href="/static/js/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="/static/js/jquery.min.js" type="text/javascript"></script>

<script src="/static/js/plugins/sortable.js" type="text/javascript"></script>

<script src="/static/js/fileinput.js" type="text/javascript"></script>

<script src="/static/js/locales/zh.js" type="text/javascript"></script>

<script src="/static/js/themes/fas/theme.js" type="text/javascript"></script>

<script src="/static/js/themes/explorer-fas/theme.js" type="text/javascript"></script>

2.3 修改文件选择样式不对,尝试各种方法不行,最后先保证文件选择样式正确,再一步步把view的代码加上,最后完美显示

1.png

3.实现上传接口

3.1 在对应的controller中添加上传router接口,只实现post方法,保证input的name值和this.GetFile("files")的key值一致

2.png 3.png
5.png

测试结果:

4.png

4.实时显示进度

暂未实现