go+beego框架项目中实现编辑头像之上传文件图片功能流程步骤

Go  /  管理员 发布于 3年前   745

有兴趣可以查阅本站go栏目中的文章，同一个项目同样的环境

在用户中心添加上传头像的功能

步骤

1.路由

//编辑用户信息 头像
beego.Router("/edituserface", &controllers.UserController{}, "get:Edituserface;post:Edituserface")

2.model

\models\user.go

package models

import (
	"github.com/astaxie/beego/orm"
	_ "github.com/go-sql-driver/mysql"
)

//由于model这个名字叫 Users 那么操作的表其实 users
type Users struct {
	Id                 int64
	Name               string
	Email              string
	Password           string
	Created_at         string
	Profile_photo_path string
}

//实例
func init() {
	//orm.Debug = true // 是否开启调试模式 调试模式下会打印出sql语句
	//orm.RegisterDataBase("default", "mysql", "root:123456@tcp(192.168.1.140:3306)/laravel?charset=utf8", 30)
	orm.RegisterModel(new(Users))
}

//方法 添加
func AddUser(users *Users) (int64, error) {
	o := orm.NewOrm()
	id, err := o.Insert(users)
	return id, err
}

//方法 编辑
func EditUser(users *Users) (int64, error) {
	o := orm.NewOrm()
	id, err := o.Update(users)
	return id, err
}

3.控制器我写在UserController中  

\controllers\user.go

其他代码省略...

package controllers

import (
	"fmt"
	"gblog/models"

	"path"
	"time"

	//"github.com/astaxie/beego"
	"github.com/astaxie/beego/orm"
	_ "github.com/go-sql-driver/mysql"
)

// UserController  is a test control
type UserController struct {
	//beego.Controller
	BaseController
}

...

//编辑用户信息  头像
func (c *UserController) Edituserface() {

	o := orm.NewOrm()
	user := models.Users{}

	//获取主键
	username := c.GetSession("username")
	o.Raw("SELECT * FROM users WHERE name = ?", username).QueryRow(&user)
	c.Data["user"] = user

	//判断是否post
	if c.Ctx.Request.Method == "POST" {
		fmt.Println("post1")
		//获取上传文件
		f, fh, err := c.GetFile("face")

		if err != nil {
			//fmt.Println("get file error ", err)
			c.ErrorJson(500, err.Error(), nil)
		}
		defer f.Close()

		//生成文件夹
		timeObj := time.Now()
		//格式化时间为字符串,只保留年月日
		var folder = timeObj.Format("20060102")

		// 保存位置在static/img/face/, 没有文件夹要先创建 需用到os
		apath := "static/img/"
		bpath := "face/"

		//获取文件后缀
		var suf string
		suf = path.Ext(fh.Filename)
		//生成文件名 （即相对地址）
		fname := bpath + folder + RandomInt(4) + suf

		facepath := apath + fname
		//上传
		c.SaveToFile("face", facepath)

		//入库
		user.Profile_photo_path = fname
		models.EditUser(&user)

		fmt.Println(fh.Filename, facepath, fname)

		c.SuccessJson("上传成功")
	}

	c.TplName = "edituserface.html"
}

...

4.view

\views\edituserface.html

{{template "public/header.html" .}}
<div class="row clearfix">
    <div class="col-md-8 column">
        <ul class="breadcrumb">
<li><a href="/">首页</a></li><li><a href="/user">个人中心</a></li><li class="active">编辑用户信息</li>
</ul>
        <div>
            <form class="form-horizontal" id="myForm" action="/edituserface" method="post" role="form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">账号</label>
                    <div class="col-sm-10"><input disabled="disabled" value="{{.user.Email}}" class="form-control" id="inputEmail3" /></div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">用户</label>
                    <div class="col-sm-10"><input disabled="disabled" value="{{.user.Name}}" class="form-control" /><span id="check_user" style="font-size: 8px;color: red;display: none;"></span></div>
                </div>
                <div class="form-group">
                    <label for="exampleInputFile" class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-10"><input type="file" name="face" id="exampleInputFile" placeholder="请输入密码"></div>
                    <p class="help-block">&nbsp;&nbsp;&nbsp; 请上传你喜欢的头像，不传则系统默认生成</p>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">提交</button></div>
                </div>
            </form>
        </div>
        
    </div>
    <div class="col-md-4 column">
    </div>
</div>
{{template "public/footer.html" .}}
<script type="text/javascript">
$(document).ready(function() {
    // bind form using ajaxForm
    $('#myForm').ajaxForm({
        dataType:  'json',
        // success:   processJson
        success: function(data){ console.log(data);
            if (data.Code == 500) {
                alert(data.Msg);
                //location.reload();
                //location.href = "/user";
            }else{
                $("#check_user").html(data.Data);
                $("#check_user").css("display","block");
            };
        }
    });
});
</script>

数据库中的效果就不截图了，有兴趣的自行测试

来两张前端交换的效果图：