【Java】文件上传保存

框架

Spring Boot + FreeMarker + Ajax

第一次尝试Spring Boot 和FreeMarker, Spring Boot最大的感受是真的方便，约定大于配置，很多东西都是在使用过程中了解，看Spring Boot实战基本看完就忘得差不多…

后台

1. 从request获取到文件
MultipartFile类保存文件信息，文件上传放在request中，可debug查看request中实体观察到。

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> files = multipartRequest.getFiles("img");

强制转换request获取MultipartHttpServletRequest，再获得MultipartFile文件

2. 写入上传文件夹
path在application.properties中定义，使用@Value标签注入。

    /**
     * 保存图像
     *
     * @param img
     * @param userName
     * @return
     */
    private String writeImgToUpload(MultipartFile img, String userName) {
        // Tomcat 放在C盘中，可能无读写权限而写入失败
        // 写入目录文件
        // 获取文件格式
        String suffix = img.getOriginalFilename().substring(img.getOriginalFilename().lastIndexOf("."));
        // 目标文件路径+文件名
        String imgFile = path + userName + suffix;
        File toFile = new File(imgFile);
        if (!toFile.getParentFile().exists()) {
            // when file is not existed, will create.
            toFile.mkdirs();
        }
        // write to target file.
        try {
            img.transferTo(toFile);
            return imgFile;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

前端

<form class="form-horizontal" id="authForm" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-sm-6">
            <b><label for="img">上传认证</label></b>
            <input type="file" id="img" name="img">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
        </div>
    </div>
</form>

Ajax通信

submitHandler : function(form) {
            var file = new FormData();
            var img = $('#img')[0].files[0];
            file.append('img', img);
            $.ajax({
                url:base_url + "/auth/update",
                type: "POST",
                data: file,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    // 成功的回调
                    if (data.code == 200) {
                        layer.msg('认证成功');
                        setTimeout(function () {
                            window.location.href = base_url;
                        }, 500);
                    } else {
                        layer.open({
                            icon: '2',
                            content: (data.msg || '认证失败')
                        });
                    }
                }
            });