Ajax请求做文件上传，后端使用MultipartFile接收

最近在做一个后台的发布监控系统项目，主要负责监控项目个接口以及对项目做一些发布，回滚等操作，其中在写发布功能时需要做文件上传，把对应的项目jar包上传到服务器然后发布，使用的是ajax请求做文件上传，其中遇到的一些问题，特此记录！ HTML页面点击发布按钮会弹出文件上传的模态框。method必须为POST，文件上传必须加上enctype="multipart/form-data，且input框的type必须为file，多选上传可以加入multiple="multiple"属性。

<div class="modal-body">
	<form id="uploadForm" method="post" enctype="multipart/form-data">
		<input type="file" name="Myfile" id="uploadFile"/>
	</form>
 </div>

JS部分，主要负责弹出弹出模态框，选择文件以及，发送发布请求。 因为，这个发布功能除了需要传入上传的文件还需要其他的一些参数，在网上看了一下就使用了FormData对象，相当于以表单的形式传入参数即可，可传入多个参数，传入的参数名称最好与后端接受的名称一致。

//获取上下文路径
    function getContextPath(){
          
   
        var pathName = document.location.pathname;
        var index = pathName.substr(1).indexOf("/");
        var result = pathName.substr(0,index+1);
        return result;
    }
	//发布按钮
    $(document).on("click",".pulish_btn",function(){
          
   
        //弹出模态框
        $("#publish_system_modal").modal({
          
   
            backdrop:"static"
        });
    });
    //确认发送请求
    $("#publish_btn").click(function () {
          
   
        var file = $("#uploadFile")[0].files[0]; //获取上传的文件，uploadFile对应input框id
        var formData = new FormData(); //新建一个formData对象,以表单的形式传参
        formData.append("fileContent",file);
        formData.append("pid","1");
        formData.append("serverName","2");
        formData.append("serverIp","3");
        $.ajax({
          
   
            url: getContextPath()+"/publish",
            type: "POST",
            data:formData,
            cache: false,
            processData:false,//默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false
            contentType:false,//避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            success: function (result) {
          
   
                //请求完清空表单上传文件内容
                var obj = document.getElementById(uploadFile) ;
                obj.outerHTML=obj.outerHTML;
            },
            error:function () {
          
   
            }
        });
    });

Controller代码，后端使用MultipartFile 来接受上传文件内容，这里需要注意注解@RequestParam的value需要与表单的上传文件的input框的name一致。

/**
     * 发布系统
     * @return
     */
    @PostMapping(value = "/publish")
    @ResponseBody
    public BaseResponse publishSystem(@RequestParam(value = "Myfile", required = false) MultipartFile fileContent,
                                      @RequestParam(required = false)String pid,@RequestParam(required = false)String serverName,
                                      @RequestParam(required = false)String serverIp){
          
   

	}

因为之前没怎么写过前端代码，Ajax使用的也少，避免不了踩了大量的坑，特此记录。 servlet的上传与下载可参考之前的：