- Http 文件上传 ,或者图片上传 原理
- 浏览器网页前端
- 单个文件上传
- 多个文件上传
- gin post form参数绑定
Http 文件上传 ,或者图片上传 原理
通过form Http Post 协议 multipart/form-data 上传文件
![1f9b6ac4da30e57d1f316126b887f465.png](https://i-blog.csdnimg.cn/blog_migrate/d389d03a1f7b9133a3ab045c1aad7b3d.jpeg)
浏览器网页前端
![90f7c86da0adf1c357d0670e53b4a306.png](https://i-blog.csdnimg.cn/blog_migrate/d2b463bbce66eaf450123c464897f298.jpeg)
Go 后端
我采用的Go 开发工具为Vscode 强烈推荐,并加上相关的Go插件。非常好用。 goland也是非常棒的开发工具,但是要正版,费用。 vscode是微软开源的工具已经完全够用,而且轻量级,系统要求极低。
![cea53747417b4d4565e4a0e0ff892e47.png](https://i-blog.csdnimg.cn/blog_migrate/1ac5df4a24d0ec1193273a542ea4e4c3.jpeg)
工程文件结构
![cb25ed8bc5f202317c3fcd28ee1e78ff.png](https://i-blog.csdnimg.cn/blog_migrate/9eb00961576e46ed49e70b9a7959fa0f.jpeg)
public 是开放 http 的 / 根目录。 当访问http://127.0.0.1/ 的时候的Home网页浏览器前端的静态资源映射
a
单个文件上传
前端 html
单个文件或者图片上传的时候 input type= "file" name="file"
action , method=post, enctype="multipart/form-data"
当用户点击submit 按钮的时候会向 http://127.0.0.1/upload发送一个post form表单的请求
![cf6c04735e73870e6e1da4b438f865c0.png](https://i-blog.csdnimg.cn/blog_migrate/19517192fdce1f8fa5da019a27d24f48.jpeg)
后端go
package main
import (
"fmt"
"net/http"
"path/filepath"
"github.com/gin-gonic/gin"
)
func main() {
router := gin.Default()
// Set a lower memory limit for multipart forms (default is 32 MiB)
router.MaxMultipartMemory = 8 << 20 // 8 MiB
router.Static("/", "./public")
router.POST("/upload", func(c *gin.Context) {
name := c.PostForm("name")
email := c.PostForm("email")
// Source
file, err := c.FormFile("file")
if err != nil {
c.String(http.StatusBadRequest, fmt.Sprintf("get form err: %s", err.Error()))
return
}
filename := filepath.Base(file.Filename)
if err := c.SaveUploadedFile(file, filename); err != nil {
c.String(http.StatusBadRequest, fmt.Sprintf("upload file err: %s", err.Error()))
return
}
c.String(http.StatusOK, fmt.Sprintf("File %s uploaded successfully with fields name=%s and email=%s.", file.Filename, name, email))
})
router.Run(":8080")
gin 参数绑定通过
name := c.PostForm("name")
获取name参数。
file, err := c.FormFile("file") 获取文件
filename := filepath.Base(file.Filename) 获取文件名称
然后保存在后端服务器
Gin 后端启动界面
![dc46ac564974cbb1000007c06dc0acc7.png](https://i-blog.csdnimg.cn/blog_migrate/a9c963b1607f6e2eb2995c8714ddcf18.jpeg)
多个文件上传
前端页面
Multiple file uploadUpload multiple files with fields
Name:
Files:
选择多个文件
![3c6b8d45a9169a048c099e615a5eda30.png](https://i-blog.csdnimg.cn/blog_migrate/061cd39cd4996f73ba300da6979777a3.jpeg)
go 后端 代码
package main
import (
"fmt"
"net/http"
"path/filepath"
"strings"
"github.com/gin-gonic/gin"
)
func main() {
router := gin.Default()
// Set a lower memory limit for multipart forms (default is 32 MiB)
router.MaxMultipartMemory = 8 << 20 // 8 MiB
router.Static("/", "./public")
router.POST("/upload", func(c *gin.Context) {
name := c.PostForm("name")
// email := c.PostForm("email")
// Multipart form
form, err := c.MultipartForm()
if err != nil {
c.String(http.StatusBadRequest, fmt.Sprintf("get form err: %s", err.Error()))
return
}
files := form.File["files"]
fnames := make([]string, 0)
for _, file := range files {
filename := filepath.Base(file.Filename)
if err := c.SaveUploadedFile(file, filename); err != nil {
c.String(http.StatusBadRequest, fmt.Sprintf("upload file err: %s", err.Error()))
return
}
fnames = append(fnames, filename)
}
c.String(http.StatusOK, fmt.Sprintf("Uploaded successfully %d files with fields name=%s and email=%s.", len(files), name, strings.Join(fnames, ",")))
})
router.Run(":8080")
}
form, err := c.MultipartForm()
files := form.File["files"]
for _, file := range files {
filename := filepath.Base(file.Filename)
}
通过循环获得多个上传的文件名
调用成功Gin 界面
![647f476e81d7193d0c7400e41b337206.png](https://i-blog.csdnimg.cn/blog_migrate/e57b220f889d90c45554b42b063a9109.jpeg)
当用户选择多个文件上传后,将获得文件列表。循环操作
![c7fd079ea0c0bdb9306c66525ccab313.png](https://i-blog.csdnimg.cn/blog_migrate/5b065dc793b04c858a789a2edc439af5.jpeg)