Goweb开发之Beego框架实战：第十五节 文件上传和图片展示功能
上节内容我们学习了首页扩功能，本节课我们继续开发实现新的功能--文件上传和图片展示功能。在实际案例中，提供有相册展示功能，相册功能展示的图片需要用到文件上传，我们来实际开发实现。
一、创建数据表
首先我们要在数据库中创建数据表，要想存储图片，我们需要图片的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页面：
相册
{{template "block/nav.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中，添加以下内容：
{{range .Album}}
{{end}}
3.4 运行
我们上传几张图片后，刷新页面：
