gin后端接收ajax上传文件和参数
问题描述
gin框架写后端,希望从前端接收单个文件和一些参数,同时不跳转页面
背景
gin文档提供的上传方式有两种,但是是通过form表单提交的,会跳转页面而且不能同时传其他类型参数,form表单上传方式如下
解决思路
利用Ajax实现不跳转页面上传,将文件和数据封装成formData格式
前端代码
html
<div class="product-details-con">
<form action="" method="post" enctype="multipart/form-data">
<input id="fileUpload" type="file" name="upload">
</form>
<br/>
<input id="changePrice" type="text" placeholder="修改价格"><br/><br/>
<input id="changeInfo" type="text" placeholder="修改说明">
</div>
js
function changeProduct() {
var formData = new FormData();
//注意文件添加
formData.append("file",$("#fileUpload")[0].files[0]);
formData.append("price",$("#changePrice").val());
formData.append("detail", $("#changeInfo").val());
$.ajax({
type: "POST",
dataType: "formData",
processData: false,
contentType: false,
url: "/custom/changeProduct",
data: formData,
success: function (dataResult) {
alert("success");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
后端代码(go)
func ChangeProduct(c *gin.Context) {
name := c.PostForm("name")
price:= c.PostForm("price")
detail := c.PostForm("detail")
file, err := c.FormFile("file")
var uploadPictureUrl string
if err != nil {
fmt.Printf("FormFile,err=%v", err)
}else{
//获取文件名
fileName := file.Filename
fmt.Println("文件名:", fileName)
//保存文件到服务器本地
//SaveUploadedFile(文件头,保存路径)
uploadPictureUrl ="assets/images/"+strconv.FormatInt(time.Now().Unix()%1000, 10)+fileName
if err := c.SaveUploadedFile(file, uploadPictureUrl); err != nil {
fmt.Printf("SaveUploadedFile,err=%v", err)
c.String(http.StatusBadRequest, "请求失败")
return
}
}
err = database.AlterFood(name,uploadPictureUrl,price,detail)
if err!=nil{
fmt.Printf("AlterFood fail,err=%v", err)
return
}
}
踩坑与注意事项
1,ajax 传输类型设置为formData
类似map,用key/value形式存数据
2,formData使用append添加文件的jQuery写法如下
前面的“file”为key,后端用此取文件,注意添加文件最后跟.files[0]
formData.append("file",$("#fileUpload")[0].files[0]);
3,接收端用取文件和其他参数方式如下:
//取其他参数
name := c.PostForm("name")
//取文件
file, err := c.FormFile("file")
fileName := file.Filename
//SaveUploadedFile(文件头,保存路径)
c.SaveUploadedFile(file, fileName)
发布于 2020-02-19 00:34