前言：
如今各位老铁们对“form表单上传多个图片”大约比较着重，大家都需要了解一些“form表单上传多个图片”的相关资讯。那么小编在网络上汇集了一些对于“form表单上传多个图片””的相关内容，希望咱们能喜欢，同学们快快来了解一下吧！Http 文件上传 ，或者图片上传 原理浏览器网页前端单个文件上传多个文件上传gin post form参数绑定
Http 文件上传 ，或者图片上传 原理
通过form Http Post 协议 multipart/form-data 上传文件
浏览器网页前端
Go 后端
我采用的Go 开发工具为Vscode 强烈推荐，并加上相关的Go插件。非常好用。 goland也是非常棒的开发工具，但是要正版，费用。 vscode是微软开源的工具已经完全够用，而且轻量级，系统要求极低。
工程文件结构
public 是开放 http 的 / 根目录。 当访问 的时候的Home网页浏览器前端的静态资源映射
a
单个文件上传前端 html
单个文件或者图片上传的时候 input type= "file" name="file"
action , method=post, enctype="multipart/form-data"
当用户点击submit 按钮的时候会向 发送一个post form表单的请求
后端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 后端启动界面
多个文件上传前端页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple file upload</title>
</head>
<body>
<h1>Upload multiple files with fields</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
Name: <input type="text" name="name"><br>
Files: <input type="file" name="files" multiple><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
选择多个文件
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 界面
当用户选择多个文件上传后，将获得文件列表。循环操作
标签： #form表单上传多个图片
