关于form表单与文件上传一起提交的问题

关于form表单与文件上传一起提交的问题

上一次做项目的时候因为我做的是身份验证功能，需要对文件进行上传，但同时需要上传个人信息，所以涉及到二者一起上传的问题。经过查找资料 我的解决方案是：

Controller层：

package cn.com.controller;

import cn.com.beans.Identity;
import cn.com.beans.UserInfo;
import cn.com.beans.Users;
import cn.com.service.IdentityService;
import cn.com.service.UserInfoService;
import cn.com.service.UsersService;
import cn.com.util.Util;
import cn.hutool.core.lang.Assert;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.bind.support.SessionStatus;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Slf4j
@Controller
@RequestMapping("/upload")
public class FileUploadController {
    @Resource
    private IdentityService identityService;
    @Resource
    private UsersService userService;
    @Resource
    private UserInfoService userInfoService;
    /**
     * 上传身份证
     * @param files
     * @param status
     * @return
     * @throws IOException
     */
    @PostMapping("/id")
    @ResponseBody
    public Map<String, Object> idImageUpload(@RequestParam("file") MultipartFile[] files, SessionStatus status, Identity identity, Model model) throws IOException {
        Map<String, Object> map = new HashMap();
        if(identityService.findOneId(identity.getIdenNo()) != null) {
            map.put("code",1);
            map.put("msg","该身份证以及验证过，请重新查证后再验证");
            return map;
        }
        System.out.println("files = " + files);

        if(files[0].isEmpty()) {
            map.put("code",1);
            map.put("msg","请选择身份证正面照片");
            return map;
        }
        if(files[1].isEmpty()) {
            map.put("code",1);
            map.put("msg","请选择身份证反面照片");
            return map;
        }
        if (files[2].isEmpty()) {
            map.put("code",1);
            map.put("msg","请选择您的照片");
            return map;
        }
        else {
            String serverPath= ResourceUtils.getURL("classpath:static").getPath().replace("%20"," ").replace('/', '\\');

            String realPath=serverPath.substring(1,serverPath.indexOf("\\target"))+"\\src\\main\\resources\\static\\IDCardImages\\"+identity.getUserNum()+"\\images";//从路径字符串中取出工程路径
            System.out.println("realPath = " + realPath);
            Path path = Paths.get(realPath);
            try {
                if(!Files.exists(path)){
                    Files.createDirectories(path);
                }
                int index = 0;
                Map<Integer,String> filesPaths = new HashMap<>();
                for (MultipartFile file:files) {
                    index++;
                    //得到上传文件的实际名称
                    String fileName =index + file.getOriginalFilename();
                    filesPaths.put(index,realPath+fileName);
                    System.out.println(fileName);
                    file.transferTo(path.resolve(fileName));
                    map.put("code",0);
                    map.put("msg","上传成功！");
                }
                identity.setCheck(0);
                identity.setFront(filesPaths.get(1));
                identity.setBack(filesPaths.get(2));
                identity.setPhoto(filesPaths.get(3));
                System.out.println("identity = " + identity);
                if(identityService.insert(identity) > 0) {
                    log.info("{} 的身份验证成功",identity.getName());
                    Users user = new Users();
                    user.setUserid(identity.getUserNum());
                    List<Users> users = userService.findAllUsers(user);
                    model.addAttribute("user",users.get(0));
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            status.setComplete();
        }
        return map;
    }
}

html代码

<form class="layui-form layui-form-pane" id="id_form"   enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input id="name" type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <input type="hidden" name="userNum" data-th-value="${session.userBean.userid}">
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="idCard" name="idenNo" autocomplete="off" placeholder="请输入身份证" class="layui-input" lay-verify="identity">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>请上传身份证正面照片</legend>
                </fieldset>
                <div class="layui-upload">
                    <button name="back" type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" >
                        <p id="demoText1"></p>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>请上传身份证反面照片</legend>
                </fieldset>
                <div class="layui-upload">
                    <button name="back" type="button" class="layui-btn" id="test2">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo2" >
                        <p id="demoText2"></p>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>请上传本人手持身份证正面照片</legend>
                </fieldset>
                <div class="layui-upload">
                    <button name="back" type="button" class="layui-btn" id="test3">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo3" >
                        <p id="demoText3"></p>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>上传完成后选择提交</legend>
                </fieldset>
                <div class="layui-form-item">
                    <input  type="button" class="layui-btn" value="提交" lay-submit  lay-filter="demo2" ></input>
                </div>
            </form>

js代码：

<script data-th-inline="javascript">
    layui.use(["upload","form"], function(){
        let{form,upload,$} = layui;


        //提交：
        form.on("submit(demo2)",function (data) {
            let fd = new FormData();
            let formData = new FormData($( "#id_form" )[0]);
            $.ajax({
                cache:true,
                url:"/upload/id",
                type:"POST",
                dataType:'json',
                data:formData,
                async:false,
                contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                success:function (rs) {

                    if (rs.code == 0) {
                        layer.msg(rs.msg,{icon:6,time: 3000});
                        // let index = parent.layer.getFrameIndex(window.name);
                        // parent.layer.close(index);//关闭当前窗口
                        // parent.layer.msg(rs.msg,{icon:6});//在父页面弹出提示框
                        window.location.href = "/user";
                    } else {
                        layer.msg(rs.msg,{icon:5,time: 3000});
                    }
                }
            });
        });

//正面头像上传：
        //选完文件后不自动上传
        upload.render({
            elem: '#test1'
            ,url: '/uploads/id' //改成您自己的上传接口
            ,auto: false
            ,bindAction: '#test4'
            ,data: {type:'front'}
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    alert("???")
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res)
            }
        });

        upload.render({
            elem: '#test2'
            ,url: '/uploads/id' //改成您自己的上传接口
            ,auto: false
            //,multiple: true
            ,bindAction: '#test4'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res)
            }
        });

        upload.render({
            elem: '#test3'
            ,url: '/uploads/id' //改成您自己的上传接口
            ,auto: false
            //,multiple: true
            ,bindAction: '#test4'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo3').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res)
            }
        });
    });
</script>