专栏首页全栈之路golang添加图片上传功能

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 条评论
登录 后参与评论

相关文章

  • Android APP项目重启

    在大学做了一个app,然后发布到百度手机助手和小米应用商店了,现在下载量达到了2万,但是估计拆卸量也挺高的。

    陨石坠灭
  • 智能合约solidity项目部署流程

    陨石坠灭
  • 智能合约solidity项目部署流程

    陨石坠灭
  • JavaScript设计模式--状态模式

    允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。 解释: (1)将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部...

    奋飛
  • SQL"已更新或者删除的行值要么不能使该行成为唯一行,要么改变了多个行(X行)“解决办法

      这种问题大多是由于没有主键(PK)导致同一张表中存在若干条相同的数据。DBMS存储时,只为其存储一条数据,因为DBMS底层做了优化,以减少数据冗余。所以删除...

    爱学习的孙小白
  • 如何用Github钩子做自动部署

    最近机缘巧合的购置了域名和服务器,不用实在是浪费,再加上一直没有属于自己的个人网站,所以打算用hexo在服务器上玩一下,这样也就不用再纠结用Github pag...

    平也
  • Mac上自己推送iOS通知到设备

    打开“终端(terminal)”,然后(注意,sudo需要的密码就是系统的root帐号密码)运行“sudo apachectl start”

    用户6094182
  • Macheine Learning Yearning学习笔记(五)

    Chapter 28、Diagnosing bias and variance: Learning curves(诊断偏差和方差:学习曲线)

    yuquanle
  • Linux 命令(73)—— ps 命令

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Dabelv
  • “云”时代开启快速、安全服务

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    张凝可

扫码关注云+社区

领取腾讯云代金券