html - 如何将文件从 html 选择器发送到 golang apis？

Question

我的 html 代码中有一个 html 文件选择器。我从那个选择器中选择一个图像并通过 jquery 将它发送到 golang 代码。但是图像文件不会被 golang 代码接收。我正在展示我的 html 和 golang 代码。

html:-

<input type="file" name="myFile" id="imageSelector"><br><br>
<button id="uploadImage">Upload Image</button>

jquery:-

$( document ).ready(function() {
    var inputFile = $('#imageSelector').val().split('\\').pop(); // give you file name
    $("#uploadImage").on("click", function(e){
        $.ajax({
            url: "/api/v1/upload",
            type: "POST",
            contentType: false,
            processData: false,
            data:{"file":inputFile},
            success: function(response){
                console.log(response);
            }
        });
    });
});

在 golang 代码中，我使用 gin 包接收它

func GetSelectedImage(c *gin.Context){
  file, err := c.FormFile("file")
  fmt.Pritnln(file) //it will show nothing
  fmt.Println(err) // request Content-Type isn't multipart/form-data
} 

错误:-

request Content-Type isn't multipart/form-data

我哪里出错了。我无法更改我的 golang 代码，但 html 代码是可编辑的。谁能告诉我我做错了什么。

Answer 1

您正在传递 data一个普通对象并告诉 jQuery 不要处理它。

这意味着它只是被转换为字符串 [object Object] jQuery 将内容类型设置为 text/plain;charset=UTF-8 .

所以它不是 multipart/form-data，也没有声称是。

---

传递 FormData对象，并向其传递一个文件，而不仅仅是文件名。

const data = new FormData();
data.append("file", $("#imageSelector")[0].files[0], inputFile);
// ...
contentType: false,
processData: false,
data: data,