golang添加图片上传功能
图片上传
环境
- 前端框架： bootstrap
- 前端上传组件： file-input.js
- 编辑器：VSCode
- 操作系统：MAC
- 服务器开发语言：golang
- 后端框架：beego
简介
- 支持多图上传
- 支持图片显示
流程
1. 前端
1.1 引入js和css
<head>
...
<!-- Bootstrap -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<!-- fileinput -->
<link rel="stylesheet" href="/static/css/fileinput.min.css">
<!-- sns font -->
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
</head>
<body>
...
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/fileinput.min.js"></script>
</body>1.2 添加窗口
添加点击按钮
<button type="button" id="uploadfiles" data-toggle="modal" data-target="#filesModal" class="btn btn-sm btn-primary">批量上传文件</button>添加窗口
<div id="filesModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- title -->
<h5 class="modal-title" id="filesModalLabel"></h5>
</div><!-- header -->
<div class="modal-body">
<input id="input-b3" name="input-b3[]" type="file" class="file" multiple data-show-upload="false"
data-show-caption="true" data-msg-placeholder="Select {files} for upload...">
</div>
<div class="modal-footer">
<!-- button -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- footer -->
</div>
</div>
</div>1.3 js代码
为按钮添加点击事件
$('#uploadfiles').on('click', function () {
$('#filesModalLabel').text("上传文件");
});初始化file-input组件
$("#input-b3").fileinput({
// language: 'zh', //设置语言
uploadUrl: location.pathname, //上传的地址
allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
uploadExtraData: function () {
return {
flag: "upload"
}
},
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
}).on("fileuploaded", function (event, data) {
if (data.response) {
pushMessage('success', '恭喜|操作成功。');
}
});
//关闭窗口后刷新
$(function () {
$('#filesModal').on('hidden.bs.modal', function () {
location.reload();
})
});2. 后端
2.1 添加controller
type PictureController{
beego.Controller
index string
}配置路由
beego.Router("/admin/picture", &background.PictureController{})2.1 添加上传逻辑
在controller中
type Error struct {
Level string
Msg string
}
type Response struct {
Status int
Data interface{}
Err Error
}
func (m *PictureController) Post() {
resp := &Response{Status: 1}
defer resp.WriteJson(m.Ctx.ResponseWriter)
flag := m.GetString("flag")
switch flag {
case "upload":
m.Upload(resp)
default:
resp.Status = -1
resp.Err = Error{Level: "warning", Msg: "参数错误|未知的flag标志。"}
}
}
const ResTmpPath = "../../tmp"
// IsExist 查看文件或目录是否存在
func (m *PictureController)IsExist(path string) bool {
_, err := os.Stat(path)
return err == nil || os.IsExist(err)
}
// Upload 上传文件
func (m *PictureController) Upload(resp *Response) {
var allfiles = m.Ctx.Request.MultipartForm.File
var keys []string
var files []*multipart.FileHeader
for k, vals := range allfiles {
keys = append(keys, k)
files = append(files, vals...)
}
if !m.IsExist(ResTmpPath) {//ResTmpPath: 临时目录
err := os.MkdirAll(ResTmpPath, 777)
if err != nil {
resp.Status = -1
resp.Err = Error{Level: "warning", Msg: "临时目录创建失败。"}
return
}
}
for i, h := range files {
f, err := h.Open()
defer f.Close()
if err != nil {
resp.Status = -1
resp.Err = Error{Level: 'warning', Msg: "文件上传失败。"}
return
}
path := ResTmpPath + "/" + h.Filename
dst, err := os.Create(path)
defer dst.Close()
if err != nil {
resp.Status = -1
resp.Err = Error{Level: "warning", Msg: "文件上传失败。"}
return
}
io.Copy(dst, f)
}
}2.2 配置静态目录
必须在beego启动前
...
beego.SetStaticPath("/images", "../../tmp")
beego.Run()本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/09/08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
