Spring Boot使用Ajax进行图片上传

前端HTML代码

<div class="add_div">
    <span class="add choose">上传寄件码截图</span>
    <input type="file" name="" id="choose-file" style="opacity: 0" multiple/>
  <!--显示图片-->
     <ul class="file-list " id="usrc">
			<!-- js代码在ParadeFrontEnd下的expressdelivery.jsp中的文件上传效果-->
     </ul>
 </div>

前端Javascript代码

 function addExpress() {
        //图片路径    li:nth-child(1):获取第一个li的标签
        var v1 = $("ul").find('li:nth-child(1)').attr('value')
        console.log("图片路径1" + v1);
        var v2 = $("ul").find('li:nth-child(2)').attr('value');
        console.log("图片路径2" + v2);
        var v3 = $("ul").find('li:nth-child(3)').attr('value');
        console.log("图片路径3" + v3);

        //创建图片数组
        let formData = new FormData();
        //将图片遍历到数组中
        let image = $("#choose-file")[0].files;
        for (let item of image) {
            formData.append("files", item);
        }

        // 方法一、把所有数据封装到formdata中，后端用formdata.name进行调用
        /*formData.append("name","小红")*/

        // 方法二、将所有参数放到一个对象中并转换成字符串类型
        // https://blog.csdn.net/lizhengyu891231/article/details/120540068
        var sends = JSON.stringify({
            "picture1": v1,
            "picture2": v2,
            "picture3": v3,
        });

        /*
        * 通过new Blob将sends添加到formData中,后端使用sends进行接收
        *   sends:后台接收的名字
        *   new Blob([sends]：new 对象的名
        *   type: "application/json"：通过json传递到后台
        * blob参考:https://www.jianshu.com/p/b322c2d5d778
        * */
        formData.append('sends', new Blob([sends], {type: "application/json"}))
        console.log("图片数组" + formData);

       $.ajax({
            url: "${pageContext.request.contextPath}/sendAdd",
            method: "post",
            contentType: false,
            processData: false,
            //用Ajax上传时，可以不用加{}
            data: formData,
            dataType: "json",
        }
    }

后端数据处理

 @RequestMapping(value = "/sendAdd", method = RequestMethod.POST)
    public void sendAdd(HttpServletResponse response,
                        @RequestPart(value = "files") MultipartFile[] files,
                        @RequestPart("sends") Send sends) throws IOException {
        Send send = new Send();

//接收前端参数传过来的参数
        String picture1 = sends.getPicture1();
        String picture2 = sends.getPicture2();
        String picture3 = sends.getPicture3();

        //图片路径1
        send.setPicture1(picture1);
        //图片路径2
        send.setPicture2(picture2);
        //图片路径3
        send.setPicture3(picture3);
        
        //文件上传
        if (files.length > 0) {
            for (int i = 0; i < files.length; i++) {
                String originalFileName = files[i].getOriginalFilename(); // 获取原始文件名
                //自定义图片名
                UUID uuid = UUID.randomUUID();
                long leastSignificantBits = uuid.getLeastSignificantBits();
				// 文件大小
                long fileSize = files[i].getSize();    
                // 文件保存地址    
                String tempPath = "F:" + File.separator + "ParadeMan" + File.separator + "image";    
                File savePathDir = new File(tempPath);
                //目录不存在的时候生成
                if (!savePathDir.exists()) {
                    savePathDir.mkdirs();
                }
                String fil = leastSignificantBits + originalFileName;
                log.info("图片信息" + fil);
                files[i].transferTo(new File(tempPath, fil));
            }
        }
//逻辑操作略
    }