Goweb开发之Beego框架实战：第十五节文件上传和图片展示功能

最新推荐文章于 2022-07-06 11:17:39 发布

Steven老师

最新推荐文章于 2022-07-06 11:17:39 发布

阅读量236

点赞数

原文链接：https://me.csdn.net/qianfeng_dashuju

版权

上节内容我们学习了首页扩功能，本节课我们继续开发实现新的功能--文件上传和图片展示功能。在实际案例中，提供有相册展示功能，相册功能展示的图片需要用到文件上传，我们来实际开发实现。

一、创建数据表

首先我们要在数据库中创建数据表，要想存储图片，我们需要图片的id，图片的路径位置，图片的名字等等。所在在utils工具包下的mysqlUtil.go文件中，添加创建数据表的方法：


//--------图片--------
func CreateTableWithAlbum() {
    sql := `create table if not exists album(
        id int(4) primary key auto_increment not null,
        filepath varchar(255),
        filename varchar(64),
        status int(4),
        createtime int(10)
        );`
    ModifyDB(sql)
}

并且在初始化数据库的方法中进行调用：


func InitMysql() {
    fmt.Println("InitMysql....")
    if db == nil {
        db, _ = sql.Open("mysql", "root:hanru1314@tcp(127.0.0.1:3306)/myblogweb")
        CreateTableWithUser()
        CreateTableWithArticle()
        CreateTableWithAlbum()
    }
}

二、上传文件

2.1 AlbumController

然后我们创建一个新的go文件，album_controller.go

package controllers

import (
    "myblogweb/models"
    "github.com/opentracing/opentracing-go/log"
)

type AlbumController struct {
    BaseController
}

func (this *AlbumController) Get() {
    this.TplName="album.html"
}

2.2 View

接下来我们去写html页面，在views目录下创建一个新的html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>

    <script src="../static/js/lib/jquery-3.3.1.min.js"></script>
    <script src="../static/js/lib/jquery.url.js"></script>
    <script src="../static/js/blog.js"></script>
    <link href="../static/css/blogsheet.css" rel="stylesheet">
</head>
<body>
{{template "block/nav.html" .}}
<div id="main">
    <form method="post">
        <input type="file" id="album-upload-file" name="upload">
        <input type="button" id="album-upload-button" value="提交文件">
    </form>
</div>

</body>
</html>

然后我们需要编写点击按钮之后的脚本代码，在blog.js文件中继续添加脚本：

//文件
    $("#album-upload-button").click(function () {
        var filedata = $("#album-upload-file").val();
        if (filedata.length <= 0) {
            alert("请选择文件!");
            return
        }
        //文件上传通过Formdata去储存文件的数据
        var data = new FormData()
        data.append("upload", $("#album-upload-file")[0].files[0]);
        alert(data)
        var urlStr = "/upload"
        $.ajax({
            url: urlStr,
            type: "post",
            dataType: "json",
            contentType: false,
            data: data,
            processData: false,
            success: function (data, status) {
                alert(":data:" + data.message);
                if (data.code == 1) {
                    setTimeout(function () {
                        window.location.href = "/album"
                    }, 1000)
                }
            },
            error: function (data, status) {
                alert("err:" + data.message + ":" + status)
            }
        })
    })

2.3 UploadController

此时我们需要新建一个文件上传的controller，upload_controller.go

package controllers

import (
    "fmt"
    "time"
    "path/filepath"
    "os"
    "io"
    "myblog/models"
)

type UploadController struct {
    BaseController
}

func (this *UploadController) Post() {
    fmt.Println("fileupload...")
    fileData, fileHeader, err := this.GetFile("upload")
    if err != nil {
        this.responseErr(err)
        return
    }
    fmt.Println("name:", fileHeader.Filename, fileHeader.Size)
    fmt.Println(fileData)
    now := time.Now()
    fmt.Println("ext:", filepath.Ext(fileHeader.Filename))
    fileType := "other"
    //判断后缀为图片的文件，如果是图片我们才存入到数据库中
    fileExt := filepath.Ext(fileHeader.Filename)
    if fileExt == ".jpg" || fileExt == ".png" || fileExt == ".gif" || fileExt == ".jpeg" {
        fileType = "img"
    }
    //文件夹路径
    fileDir := fmt.Sprintf("static/upload/%s/%d/%d/%d", fileType, now.Year(), now.Month(), now.Day())
    //ModePerm是0777，这样拥有该文件夹路径的执行权限
    err = os.MkdirAll(fileDir, os.ModePerm)
    if err != nil {
        this.responseErr(err)
        return
    }

    //文件路径
    timeStamp := time.Now().Unix()
    fileName := fmt.Sprintf("%d-%s", timeStamp, fileHeader.Filename)
    filePathStr := filepath.Join(fileDir, fileName)
    desFile, err := os.Create(filePathStr)
    if err != nil {
        this.responseErr(err)
        return
    }

    //将浏览器客户端上传的文件拷贝到本地路径的文件里面
    _, err = io.Copy(desFile, fileData)
    if err != nil {
        this.responseErr(err)
        return
    }

    if fileType == "img" {
        album := models.Album{0, filePathStr, fileName, 0, timeStamp}
        models.InsertAlbum(album)
    }

    this.Data["json"] = map[string]interface{}{"code": 1, "message": "上传成功"}
    this.ServeJSON()

}

func (this *UploadController) responseErr(err error) {
    this.Data["json"] = map[string]interface{}{"code": 0, "message": err}
    this.ServeJSON()
}

最后要注册路由：

//相册
beego.Router("/album", &controllers.AlbumController{})

//文件上传
beego.Router("/upload", &controllers.UploadController{})

2.4 Model

接下来我们创建一个新的model，album_model.go文件：

type Album struct {
    Id         int
    Filepath   string
    Filename   string
    Status     int
    Createtime int64
}

我们需要在album_model.go文件中，添加插入数据的方法：

//-------插入图片---------------
func InsertAlbum(album Album) (int64, error) {
    return utils.ModifyDB("insert into album(filepath,filename,status,createtime)values(?,?,?,?)",
        album.Filepath, album.Filename, album.Status, album.Createtime)
}

2.5 运行

重启项目后，点击图片按钮，然后选择一张图片：

点击提交文件按钮后，可以上传图片了。

我们可以查询一下数据库：

三、查看图片

通过上面的操作已经能够上传文件了，那么如何显示文件呢？当点击图片标签的时候，除了有上传操作，还应该可以显示已经存储的图片。

3.1 Model

我们现在album_model.go文件中，添加查找图片数据的方法：

//--------查询图片----------
func FindAllAlbums() ([]Album, error) {
    rows, err := utils.QueryDB("select id,filepath,filename,status,createtime from album")
    if err != nil {
        return nil, err
    }
    var albums []Album
    for rows.Next() {
        id := 0
        filepath := ""
        filename := ""
        status := 0
        var createtime int64
        createtime = 0
        rows.Scan(&id, &filepath, &filename, &status, &createtime)
        album := Album{id, filepath, filename, status, createtime}
        albums = append(albums, album)
    }
    return albums, nil
}

3.2 Controller

接下来，我们修改album_controller.go文件中的Get()方法，

func (this *AlbumController) Get() {
    albums,err := models.FindAllAlbums()
    if err !=nil{
        log.Error(err)
    }
    this.Data["Album"] = albums
    this.TplName="album.html"
}

3.3 View

最后我们还要修改一下html页面，在album.html中，添加以下内容：

<div id="album-box">
    {{range .Album}}
        <div class="album-item" style='background-image: url("{{.Filepath}}");'></div>
    {{end}}
</div>

3.4 运行

我们上传几张图片后，刷新页面：

Steven老师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Goweb开发之Beego框架实战：第十五节文件上传和图片展示功能

上节内容我们学习了首页扩功能，本节课我们继续开发实现新的功能--文件上传和图片展示功能。在实际案例中，提供有相册展示功能，相册功能展示的图片需要用到文件上传，我们来实际开发实现。一、创建数据表首先我们要在数据库中创建数据表，要想存储图片，我们需要图片的id，图片的路径位置，图片的名字等等。所在在utils工具包下的mysqlUtil.go文件中，添加创建数据表的方法：//--------图片--------func CreateTableWithAlbum() { sql :=
复制链接

扫一扫