Question

我是前端开发的新手，并且遇到了为这种特定表单设置拼凑解决方案的麻烦。

我已经创建了一个代表此实例创建页面的jsp。这是一个包含大量下拉菜单和复选框的表单。我需要为它添加一个文件上传选项。

jsp设置如下......

<form class="form-horizontal" id="editInstanceForm" onsubmit="return false;"> ....

这是我的输入字段

<div class="form-group" id="uploadForm">
    <label class="col-xs-4 control-label instanceDefaultLabel" for="fileSearchField">Default Location and Zoom:</label>
    <div class="col-xs-3">
        <input name="myFile" type="file" id="fileSearchField" multiple=false>
        <button id="upload-button">Upload</button>
    </div>
    .....
</div>

现在我有一个ajax调用，在我意识到整个表单在我上传文件时尝试提交之前，我原本想要使用它。这是......

$('#upload-button').click( 'click',
    function() {
        var form = $('#fileSearchField')[0];
        var data = new FormData(form);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/edit/uploadfile",
            data: data,
            processData: false, 
            contentType: false,
            cache: false,
            success: function (data) {
                alert("hi stuff worked");
            },
            error: function (e) {
                alert("nope!");
            }
        });
    }
);

我在研究如何使用jQuery / ajax和Spring Boot（我使用Spring Boot创建我的端点）上传文件时得到了这个建议。以下是我一直在阅读的一些文章，试图了解如何做到这一点......

https://www.mkyong.com/spring-boot/spring-boot-file-upload-example-ajax-and-rest/

http://javasampleapproach.com/spring-framework/spring-boot/multipartfile-create-spring-ajax-multipartfile-application-downloadupload-files-springboot-jquery-ajax-bootstrap#3_Implement_upload_controller

还有更多。这似乎是解决方案，直到我意识到这是一个表单，我想我需要立即保存所有字段。这意味着我必须修改已创建的ajax函数，该函数保存此表单并将其传递给终点。现在我不知道如何将我的MulitpartFile作为这个不同功能的一部分。现有的就是这样......

 $.ajax({
    type: "POST",
    url: webroot + "/viewerConfig/mapInstance/insertOrUpdate",
    data: JSON.stringify(instanceData),
    processData: false,
    contentType: 'application/json',
    success: function (data) {
        if (data.status === "OK") {
            alert("Instance created/updated successfully");
        } else {
            alert("Unknown error");
        }
    },
    fail: function () {
        alert("Unknown error");
    },
    error: function (a) {
        alert("Unknown error");
    }
});
});

这正是我陷入困境的地方，我需要指出正确而富有成效的方向。

我不知道这是否会有所帮助，但这是我的终点，看起来像我必须用我的文件参数添加... ...

@RequestMapping(value = "/insertOrUpdate", method = RequestMethod.POST, consumes = "application/json")
public @ResponseBody BaseStatusResponse insertOrUpdate(final @RequestBody SaveAdminInstanceView newInstance, HttpServletResponse servletResponse,
                                                       @RequestParam MultipartFile file)

编辑：我做了一些卷曲故障排除，这是失败的MulitpartFile。我按照建议传递了它但是我得到了这个例外：

org.springframework.web.multipart.MultipartException: The current request is not a multipart request</p><p><b>Description</b> The server encountered an unexpected condition that prevented it from fulfilling the request.</p><p><b>Exception</b></p><pre>org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: The current request is not a multipart request

Answer 1

您可以尝试以下代码：

$.ajax({
  url: "/edit/uploadfile",
  type: 'POST',
  data: new FormData($(this)[0]),
  enctype: 'multipart/form-data',
  processData: false, // tell jQuery not to process the data
  contentType: false, // tell jQuery not to set contentType
  cache: false,

  success: function(res) {
    console.log(res);
  },

  error: function(res) {
    console.log('ERR: ' + res);
  }
});

在控制器中，您无需声明consumes = "application/json"

Answer 2

我弄清楚我做错了什么。它希望表单元素不是文件元素。 FormData需要表单。谢谢你的帮助！ :)

使用JavaScript / Ajax将文件上载到SpringBoot端点

2 个答案: