golang添加图片上传功能

环境

  • 前端框架: bootstrap
  • 前端上传组件: file-input.js
  • 编辑器:VSCode
  • 操作系统:MAC
  • 服务器开发语言:golang
  • 后端框架:beego

简介

  • 支持多图上传
  • 支持图片显示

流程

1. 前端

1.1 引入jscss

<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()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web开发

前后端分离跨服务器文件上传-Java SpringMVC版

 近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码。 一、Tomcat服务...

2.9K8
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(6.个人中心)

如果报错(往往因为mysql的版本8.0什么的,加密方式导致初始化脚本报错),解决办法

2262
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 没啥好说的.开干吧. 今天...

2185
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑...

2675
来自专栏恰同学骚年

ASP.NET页面周期学习笔记之一

ASP.NET页面生命周期——理解:重中之重!!! 1.基本概念:所谓的页面生命周期,指的是一个ASP.NET页面类对象从初始化到销毁经过的步凑过程; 2.大致...

793
来自专栏Python小屋

Python使用matplotlib绘制正多边形逼近圆周

运行结果:用鼠标单击或拖动Slider组件并修改其值,单击按钮组件可以恢复Slider组件的默认值6。

2282
来自专栏macOS 开发学习

Mac开发之 Cocoa 绑定 入门

从iOS开发转为Mac OSX应用开发的过程中,cocoa 绑定算是比较大的一个差异,也是OSX上比较实用的技术,cocoa 绑定让开发者节省了大量的代码,可以...

952
来自专栏微信公众号:Java团长

Intellij IDEA神器居然还有这些小技巧

Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜。出于对Intellij IDEA的喜爱,我决定写一个与其相关的专...

892
来自专栏跟着阿笨一起玩NET

Dev XtraTreeList 学习

本文转载:http://www.cnblogs.com/VincentLuo/archive/2012/01/06/2313983.html

1661
来自专栏林德熙的博客

C# 从零开始写 SharpDx 应用 控制台创建 Sharpdx 窗口 下载创建窗口

本文告诉大家如何在控制台使用 SharpDx 创建窗口,这是一个底层的博客,我会用很多博客告诉大家如何从控制台创建一个高性能渲染程序

1212

扫码关注云+社区