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的上传与下载可参考之前的:https://blog.csdn.net/xxxxu5811/article/details/114840922

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,这是一个比较复杂的问题,我会尽力解答。 首先,在前端使用 ajax 发送 .mp3 文件需要使用 FormData 对象来封装数据,代码如下: ```javascript const formData = new FormData(); formData.append('file', file); $.ajax({ url: '/upload', type: 'POST', data: formData, contentType: false, processData: false, success: function(data) { console.log('上成功'); }, error: function() { console.log('上失败'); } }); ``` 其中,`file` 是一个 File 对象,代表要上的 .mp3 文件,可以通过 `<input type="file">` 获取。 接下来,在后端使用 Java 接收并保存 .mp3 文件,代码如下: ```java @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return "上失败,请选择文件"; } try { byte[] bytes = file.getBytes(); Path path = Paths.get(file.getOriginalFilename()); Files.write(path, bytes); return "上成功"; } catch (IOException e) { e.printStackTrace(); return "上失败"; } } ``` 其中,`@PostMapping("/upload")` 表示接收 POST 请求,并且路径为 `/upload`。 `@RequestParam("file")` 表示接收名为 `file` 的文件参数。 `MultipartFile` 是 Spring 框架提供的类,用于接收文件。 `file.isEmpty()` 判断文件是否为空。 `file.getBytes()` 获取文件的字节数组。 `Paths.get(file.getOriginalFilename())` 获取文件的原始名称,并转换为 Path 对象。 `Files.write(path, bytes)` 将字节数组写入文件。 最后,启动后端程序,访问前端页面,选择要上的 .mp3 文件,点击上按钮,即可将文件后端,并保存到电脑中。 希望这个回答能够帮助到你。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值