javascript - 如何修改上传功能的前端代码

Question

我想获取更新信息，包括上传文件功能，用于后端代码，它在上面:

http.HandleFunc("/uploadHeadurlHandler", uploadHeadurlHandler)

file, image, err := r.FormFile("picture")
if err != nil {
    log.Println(" -- Failed to FormFile, err:", err)
    message(w, code.CodeMsg[code.CodeFormFileFailed])
    return
}

前端边码如下:

<form action="/userinfo" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>username</td>
        <td><input type="text" disabled="disabled" name="username" value="{{.Username}}"></td>
    </tr>
    <tr>
        <td>password</td>
        <td><input type="text" name="password"></td>
    </tr>
    <tr>
        <td>nickname</td>
        <td><input type="text" name="nickname" value="{{.Nickname}}"></td>
    </tr>
    <tr>
        <td>file</td>
        <td><input type="file" id="file" name="upload" value="{{.Headurl}}"></td>
    </tr>
</table>
<input type="submit" value="update">

<script>
    $("#file").on("change", function () {
        var formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: "/uploadHeadurlHandler",
            type: "POST",
            data: {picture:formData},
            processData: false,
            contentType: false,
            success: function (response) {
                alert("upload success")
            }
        });
    });
</script>

现在后端错误是: Failed to FormFile, err: request Content-Type isn't multipart/form-data我暂停了前端方面的一些问题，我是前端的新鲜事物，任何人都可以告诉我如何更改上述前端方面。

Answer 1

您的服务器期望Content-Type为multipart/form-data，但这不是您的前端发送的。
使用jQuery，您需要发送要发送的set the data field to the actual FormData object。
要在服务器上设置正确的名称，还应该在前端将名称更改为picture。
当您应用这些更改时，它看起来像这样:

<script>
    $("#file").on("change", function () {
        var formData = new FormData();
        formData.append("picture", $("#file")[0].files[0]); // <- changed the form file name 
        $.ajax({
            url: "/uploadHeadurlHandler",
            type: "POST",
            data: formData, // <- send the actual FormData object
            processData: false,
            contentType: false,
            success: function (response) {
                alert("upload success")
            }
        });
    });
</script>

这样，上传应该可以工作。然后，您需要在HTML表单中重命名输入字段的 name，以确保它们也可以在没有JavaScript的情况下使用(如果表单的 action设置正确等):

<tr>
    <td>file</td>
    <td><input type="file" id="file" name="picture" value="{{.Headurl}}"></td>
</tr>