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

2023-06-01 00:00:00 框架 头像 上传文件

有兴趣可以查阅本站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">&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>


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

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

1.png


上传头像.png

相关文章