使用Go语言Gin框架实现代理文件下载功能 - 基于Layui框架的文件上传实践
最编程
2024-02-10 17:13:20
...
基本的思路就是随便创建一个元素，然后使用layui的upload组件对创建的元素进行渲染，详见代码
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.5.0.min.js" type="text/javascript"></script> <!-- jquery包，记得替换为你本地的路径 -->
<link rel="stylesheet" href="layui/css/layui.css"> <!--layui框架的样式库 同样你本地的路径 -->
<script src="pkg/layui/layui.js"></script><!--enmmm 没错，路径-->
</head>
<body>
<!-- 这里我是用的a标签，当然你可以使用别的 label、button等均可-->
<a href="javascript:(0);" id="attachment-upload">+添加附件</a>
</body>
<script>
//以layui.js的方式引入使用时需要手动加载layui的组件
layui.use(['layer','upload'],function(){ // PS：个人理解，该行只是为了引入layui框架的组件，html文件加载完毕后执行，内部的代码和直接写在script标签内没啥区别，只是可以在代码中使用layer了
// 此处引入layer只是为了打印一些东西
var layer = layui.layer,
upload = layui.upload;
// 渲染元素，使其支持文件上传
// 详情请移步 https://www.layui.com/doc/modules/upload.html
// https://www.layui.com/demo/upload.html
upload.render({
elem: '#attachment-upload', // 感觉利用了jquery的id选择器，这里用#id(上传附件的标签、按钮值类型元素id)就可以了
url: dev_url + "fc/upload", // 后端接收上传文件的接口地址
headers: { // 这里官方文档中没有，是在请求后端接口时在request header中增加一些请求参数，实测可行
'api_token': uInfo
},
accept: 'file', // 这里可以限定支持上传文件的类型，详见文档
done: function (res) { // 调用后端上传文件接口后的返回
// 这里解析下后端的返回字段，具体怎么着看业务吧
if (res.success == false) {
layer.msg("上传文件失败!" + res.msg);
}
});
})
</script>
</html>
PS：注意下使用layui上传文件的请求格式为multiply/form-data，参数为file,(binary)格式
