gin后端接收ajax上传文件和参数

问题描述

gin框架写后端，希望从前端接收单个文件和一些参数，同时不跳转页面

背景

gin文档提供的上传方式有两种，但是是通过form表单提交的，会跳转页面而且不能同时传其他类型参数，form表单上传方式如下

上传文件 · Gin中文文档 · 看云www.kancloud.cn/shuangdeyu/gin_book/949420

解决思路

利用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>

    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