Javaweb基于Commons_ui实现的文件上传

Axios,html,JS,Servlet

前端页面:

<iframe src="" name="iframeName" style="display: none"></iframe>
                <form method="post" target="iframeName" id="form">
                        <input type="file" name="avatarPath" id="test-image-file" class="fileHead" accept="image/gif, image/jpeg, image/png, image/jpg" multiple="multiple">
                        <input type="text" placeholder="请输入您的昵称" class="change_userInformation" id="information_name" name="nickname">
                        <select id="information_sexSelect" name="sex">
                            <option value="1" id="boy_information">男</option>
                            <option value="0" id="girl_information">女</option>
                        </select>
                </form>
 <button class="c_btn" id="change_confirm">确认</button>

由于不使用JSP页面,form表单提交是通过axios实现的,所以需要设置一个iframe,实现form表单的假提交,防止页面刷新两次.并且,form表单里面的input框需要设置name属性.

axios

//表单请求
        let forms = new FormData();
        //表单数据 name value 正确提交格式
        forms.append('account',document.getElementById("account_none").value);
        forms.append('nickname',document.getElementById("information_name").value);
        forms.append('sex',document.getElementById("information_sexSelect").value);
        forms.append('city',document.getElementById("information_citySelect").value);
        let files = document.getElementById("test-image-file").files
        //上传多个文件
        Array.from(files).forEach(item => {
            forms.append('file',item)
        })
        axios({
            method: "post",
            headers: {
                 'Content-Type': 'multipart/form-data'
            },
            url: "http://localhost:8080/Java_war/userInformation/uploadServlet",
            data:forms
        }).then(function (resp){
            if(resp.data === "success"){
                change_Information.style.display = "none";
                selectAll(account);
                show_Information.style.display = "block";
            }
        })

form表单提交时,如果没有文件上传或者下载,可直接获取input里面的value值进行数据提交,但是涉及到文件的上传与下载之后,就需要按照("name","value") 的格式进行提交了.

并且axios提交中需要设置请求头(文件传输需要)

headers: {
     'Content-Type': 'multipart/form-data'
},

后端代码

service

 public UserInformation paseEmByFileItem(List<FileItem> fs) throws Exception
    {
        UserInformation userInformation = new UserInformation();
        if(fs != null)
        {
            for(FileItem f : fs)
            {
                if(f.isFormField()) //普通表单
                {
                    String inputName = f.getFieldName();//获取表单的name属性值
                    String inputValue = f.getString("utf-8");
                    if("nickname".equals(inputName))
                    {
                        if(inputValue != null && !"".equals(inputValue))
                        {
                            userInformation.setNickname(inputValue);
                        }
                    }
                    if("account".equals(inputName))
                    {
                        if(inputValue != null && !"".equals(inputValue))
                        {
                            userInformation.setAccount(inputValue);
//                            System.out.println("账号:"+inputValue);
                        }
                    }
                    if("sex".equals(inputName))
                    {
                        if(inputValue != null && !"".equals(inputValue))
                        {
                            userInformation.setSex(Integer.parseInt(inputValue));
//                            System.out.println("性别:"+inputValue);
                        }
                    }
                    if("city".equals(inputName))
                    {
                        if(inputValue != null && !"".equals(inputValue))
                        {
                            userInformation.setCity(inputValue);
//                            System.out.println("城市:"+inputValue);
                        }
                    }
                }
                else //文件上传
                {
                    //获取文件
                    String oldImgName = f.getName();
                    //新文件名称
                    String newImgName = UUID.randomUUID().toString()+oldImgName.substring(oldImgName.lastIndexOf("."));
                    //文件
                    // File newImgFile = new File("D:\\softwore\\javaDemo\\Java\\src\\main\\webapp\\upload\\"+newImgName);
                    File newImgFile = new File("你想把图片保存的路径"+newImgName);
                    f.write(newImgFile);//把添加的图片写到本地硬盘中
                    //往数据库中存图片路径
                    //userInformation.setAvatarPath("upload/images/"+newImgName);
                    //upload/images/fdb4e1aa-f4af-40fd-a1d0-58e37548ca4d.jpg
                }
            }
        }
        return userInformation;
    }

利用commons-ui的API,判断提交的表单数据是普通表单,还是带有文件的表单,将两者分开即可.

servlet

 //接收文件
    public void uploadServlet(HttpServletRequest req, HttpServletResponse resp) throws Exception
    {
        //接收请求参数
        ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
        resp.setContentType("text/html;charset = utf-8");
        List<FileItem> fileItems = servletFileUpload.parseRequest(req);
        //获取请求参数
        UserInformation userInformation = userInformationService.paseEmByFileItem(fileItems);
       System.out.pritnln(userInformation);
    }

带有文件上传的表单,接收请求数据时,使用commons-ui提供的API,较为方便.

ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
List<FileItem> fileItems = servletFileUpload.parseRequest(req);