Layui框架实现文件上传
基本的思路就是随便创建一个元素,然后使用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" rel="external nofollow" > <!--layui框架的样式库 同样你本地的路径 -->
<script src="pkg/layui/layui.js"></script><!--enmmm 没错,路径-->
</head>
<body>
<!-- 这里我是用的a标签,当然你可以使用别的 label、button等均可-->
<a href="javascript:(0);" rel="external nofollow" 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)格式
Gin框架获取前端上传的文件
func UploadFileControl(c *gin.Context) {
logrus.Infof("[UploadFileControl] user_id =%d", userId)
// GIN框架获取前端上传文件
// 这里的参数其实是上传文件时的字段名,也就是上面图片中的file,如果前端是自己定义的其他字段名,需要替换下
uploadFile, fileHeader, err := c.Request.FormFile("file")
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"msg": "获取文件信息失败!" + err.Error(),
})
}
if uploadFile != nil { // 记得及时关闭文件,避免内存泄漏
defer uploadFile.Close()
}
// 读取上传文件的内容
// 其实这里直接读取所有不太合理,如果文件过大时会占用很多内存,可以考虑使用缓冲区读取
fileContent, err := ioutil.ReadAll(uploadFile)
if err != nil {
c.JSON(http.StatusOK, gin.H{
"success": false,
"msg": "读取文件内容失败!" + err.Error(),
})
}
// 接受到文件后的处理方式,可以保存到本地,也可以上传到文件对象,看自己了
// 这里向前端返回下上传成功的信息
c.JSON(http.StatusOK, gin.H{
"success": true,
"msg": "",
})
}
Gin框架的文件下载
Response Header中的Content-Type指定了服务器端返回数据的类型,浏览器自己是可以处理这些类型的,当返回的数据为文件类型时,浏览器会自行下载。具体的类型和content-type的对应方式可见
文件扩展名 | Content-Type(Mime-Type) | 文件扩展名 | Content-Type(Mime-Type) |
---|---|---|---|
.*( 二进制流,不知道下载文件类型) | application/octet-stream | .tif | image/tiff |
.001 | application/x-001 | .301 | application/x-301 |
.323 | text/h323 | .906 | application/x-906 |
.907 | drawing/907 | .a11 | application/x-a11 |
.acp | audio/x-mei-aac | .ai | application/postscript |
.aif | audio/aiff | .aifc | audio/aiff |
.aiff | audio/aiff | .anv | application/x-anv |
.asa | text/asa | .asf | video/x-ms-asf |
.asp | text/asp | .asx | video/x-ms-asf |
.au | audio/basic | .avi | video/avi |
.awf | application/vnd.adobe.workflow | .biz | text/xml |
.bmp | application/x-bmp | .bot | application/x-bot |
.c4t | application/x-c4t | .c90 | application/x-c90 |
.cal | application/x-cals | .cat | application/vnd.ms-pki.seccat |
.cdf | application/x-netcdf | .cdr | application/x-cdr |
.cel | application/x-cel | .cer | application/x-x509-ca-cert |
.cg4 | application/x-g4 | .cgm | application/x-cgm |
.cit | application/x-cit | .class | java
// 设置返回头并返回数据
fileContentDisposition := "attachment;filename=\"" + attachmentName + "\""
c.Header("Content-Type", "application/zip") // 这里是压缩文件类型 .zip
c.Header("Content-Disposition", fileContentDisposition)
c.Data(http.StatusOK, contentType, fileContent)
到此这篇关于Golang Gin框架实现文件下载功能的文章就介绍到这了,更多相关Gin框架文件下载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网! 免责声明: ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。 ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341 软考中级精品资料免费领
相关文章发现更多好内容猜你喜欢AI推送时光机GolangGin框架实现文件下载功能的示例代码后端开发2024-04-02 Golang Gin框架实现文件下载功能的示例代码怎么写后端开发2023-06-22 SpringBoot实现文件上传与下载功能的示例代码后端开发2024-04-02 java实现文件夹上传功能实例代码(SpringBoot框架)后端开发2023-05-14 Java实现断点下载功能的示例代码后端开发2024-04-02 SpringCloudFeign实现文件上传下载的示例代码后端开发2024-04-02 JavaSpringBoot实现文件上传功能的示例代码后端开发2024-04-02 Struts2 控制文件上传下载功能实例代码后端开发2023-05-31 Go Gin实现文件上传下载的示例代码后端开发2022-06-07 PHP实现文件上传和下载的示例代码后端开发2024-04-02 Vue实现输入框@功能的示例代码后端开发2024-04-02 Servlet实现代理文件下载功能后端开发2023-05-30 Python实现清理重复文件功能的示例代码后端开发2024-04-02 Vue实现文件切片上传功能的示例代码后端开发2022-11-13 JavaWeb 文件的上传和下载功能简单实现代码后端开发2023-05-31 Android强制下线功能实现的代码示例后端开发2022-06-06 Vue实现预览文件(Word/Excel/PDF)功能的示例代码后端开发2023-03-20 Android实现文件下载进度显示功能后端开发2022-06-06 java web项目实现文件下载实例代码后端开发2022-11-15 咦!没有更多了?去看看其它编程学习网 内容吧 |