go+beego框架项目中实现编辑头像之上传文件图片功能流程步骤
有兴趣可以查阅本站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:[email protected](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"> 请上传你喜欢的头像,不传则系统默认生成</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>
数据库中的效果就不截图了,有兴趣的自行测试
来两张前端交换的效果图:
相关文章