前言
在现代Web应用程序开发中，文件上传是一个常见的需求，用户经常需要上传图片、文档等文件到服务器。本次青训营大作业中的投稿接口（登录用户选择视频上传），就需要实现文件上传功能。
在本文中，我们将探讨如何使用Gin框架实现一个简单的文件上传功能。我们将从项目目录结构、前端页面、后端代码以及实际演示步骤入手，逐步讲解如何搭建一个完整简易的文件上传系统。
系统目录结构
首先，让我们来了解一下我们的项目目录结构。这有助于我们更好地组织代码和资源文件。
upload/
├── public/
│ └── index.html
├── static/
├── main.go
└── router.go
在这个示例项目中，我们有一个名为upload的主目录，其中包含了public用于存放前端资源，static用于存放静态资源（也就是文件上传后保存到这里），以及两个Go代码文件main.go和router.go。
前端页面
这里简单写一个用户界面，让用户选择文件并填写一些相关信息。我们使用 HTML 编写一个简单的表单页面，这个页面允许用户上传单个文件，并输入一个名称（Name）作为附加信息。
index.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文件上传示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
padding: 20px;
background-color: #2c3e50;
color: #ecf0f1;
margin: 0;
border-radius: 8px 8px 0 0;
}
form {
width: 50%;
margin: 20px auto;
padding: 20px;
background-color: #ecf0f1;
border-radius: 0 0 8px 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #34495e;
}
input[type="text"],
input[type="file"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #dcdcdc;
border-radius: 4px;
transition: border-color 0.3s ease-in-out;
}
input[type="text"]:focus,
input[type="file"]:focus {
border-color: #3498db;
}
input[type="submit"] {
display: block;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>Gin文件上传示例</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="name">Name: </label>
<input type="text" name="name" id="name">
<label for="file">File: </label>
<input type="file" name="file" id="file">
<input type="submit" value="上传">
</form>
</body>
</html>
页面打开是这样的：
这个表单简单明了，包括一个文本输入框用于输入名称，一个文件选择输入框用于选择上传的文件，最后是一个提交按钮。
后端代码
接下来，我们来写两个文件：main.go和router.go。这两个文件协同工作，用于实现了文件上传的核心逻辑（代码量不多）。
main.go
在main.go文件中，我们创建了一个Gin的实例，并初始化了HTTP服务器。
package main
import (
"github.com/gin-gonic/gin"
)
func main() {
// 创建一个默认配置的 Gin 实例
router := gin.Default()
// 初始化路由
initRouter(router)
// 启动 HTTP 服务器并监听端口
router.Run(":8080")
}
这段代码创建了一个Gin的HTTP服务器实例，使用默认的配置选项进行初始化，并通过initRouter函数初始化路由。
router.go
接着是 router.go文件，我们定义了初始化路由的函数initRouter，实现了文件上传的逻辑。
package main
import (
"net/http"
"path/filepath"
"github.com/gin-gonic/gin"
)
const (
routeUpload = "/upload"
fieldName = "file"
)
func initRouter(router *gin.Engine) {
// 设置静态文件路径，将根 URL 映射到 public 目录
router.Static("/", "./public")
// 设置文件上传的路由处理函数
router.POST(routeUpload, func(c *gin.Context) {
// 获取表单字段 "name" 的值
name := c.PostForm("name")
// 获取上传的文件
file, err := c.FormFile(fieldName)
if err != nil {
c.String(http.StatusBadRequest, "获取文件失败: %s", err)
return
}
// 获取上传文件的文件名
filename := filepath.Base(file.Filename)
// 视频保存路径
dst := filepath.Join("./static/", filename)
// 将上传的文件保存到服务器
if err := c.SaveUploadedFile(file, dst); err != nil {
c.String(http.StatusInternalServerError, "上传文件失败: %s", err)
return
}
// 返回成功上传的消息
c.String(http.StatusOK, "%s 成功上传文件 %s.", name, file.Filename)
})
}
在这段代码中，我们通过router.Static指定了静态资源的路径，这将使得前端页面能够被访问到。接着，我们定义了/upload的POST请求路由，其中实现了文件上传的逻辑。我们从表单中获取文件和名称信息，将文件保存到服务器上，并返回一个成功上传的响应。
具体步骤
a. 创建目录和文件
首先，我们创建一个项目目录upload。
在upload目录下，创建public和static文件夹，并将前面提到的 index.html 文件放入public目录。
b. 初始化模块
在终端中，进入upload目录，执行以下命令初始化模块：
go mod init upload
这将创建go.mod，用于管理项目的依赖。
c. 安装Gin框架
确保你已经安装了 Go 编程语言。然后，在终端中执行以下命令安装 Gin 框架：
go get -u github.com/gin-gonic/gin
d. 编写主要代码
将前面提到的main.go和router.go代码放到根目录下。
这样，整体的项目目录结构如下：
upload/
├── public/
│ └── index.html
├── static/
├── go.mod
├── go.sum
├── main.go
└── router.go
e. 运行应用程序
在终端中进入upload目录，执行以下命令以构建项目：
go build
这将编译项目并生成一个可执行文件。执行以下命令以运行项目：
./upload
f. 上传文件
现在就可以在浏览器中访问 http://localhost:8080，文件上传界面页面了。
我们可以在界面上输入姓名并选择文件，然后上传文件。上传成功后，文件将被保存在static目录中，并显示上传成功的消息。
总结
在本篇实践记录中，我们使用了 Gin 框架创建了一个简单的文件上传功能。这个示例展示了如何使用 Gin 来构建 Web 应用程序的文件上传基本功能，为进一步开发提供了坚实的基础。
