spring boot + freemarker ajax 上传文件

js 部分
注： js部分主要是在页面上选择文件 把文件通过ajax请求传到后台，我这里需要后台的回传地址然后把回传地址提交到服务器

<form class="form-horizontal m-t" id="form" method="post" action="/s/banner" enctype="multipart/form-data">
  <div class="form-group">
        <div class="col-sm-6 form-group">
            <label class="col-sm-4 control-label">上传图片：</label>
            <div class="col-sm-8">
                 <input id="upload" name="file" accept="image/*" type="file">
                 <input id="picUrl" name="picUrl" style="display: none">
                 <img id="pic" src="" style="width: 100px;height: 100px">
            </div>
        </div>
    </div>
</form>

<script>
    var jqGridId = "#table_jq",
        dataUrl = "/s/banner/list",
        formId = "#form",
        winname = "${winname!}";
    jQuery(document).ready(function () {
        CommonHandlerJs.init();
    });

    function validateForm() {
        $(formId).submit();
    }

    <!--上传图片 -->
    $(function () {
        $("#upload").click(function () {
            // $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change", function () {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                    upimg();
                }
            });
        });
    });

    //建立一?可存取到?file的url
    function getObjectURL(file) {
        // console.log(1)
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    //上传头像到服务器
    function upimg() {
        var file = new FormData();
        var pic = $('#upload')[0].files[0];
        file.append('file', pic);
        $.ajax({
            url: "/s/file/doUploadPic",
            type: "post",
            data: file,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                //将回传地址赋给input
                // console.log(data);
                var res = data;
                $("#picUrl").val(res.data.imgUrl);
                // $("#pic").attr('src',res)
            }
        });
    }
</script>

 

java 部分 

注：java代码部分主要是负责把前台传过来的文件保存在服务器中 执行完后需要返回一个回传地址

  /**
     * 上传图片
     */

    @RequestMapping(value = "/file/doUploadPic", method = RequestMethod.POST)
    @ResponseBody
    public ResultEntity doModifyHead(HttpServletRequest request) {
        // 转型为MultipartHttpRequest：
        MultipartFile file = null;
        System.out.println("上传图片");
        ResultEntity resultEntity = new ResultEntity();
        try {
            if (request instanceof MultipartHttpServletRequest) {
                MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
                multipartHttpServletRequest.getFileNames();
                file = multipartHttpServletRequest.getFile("file");
            }

            if (file == null) {
                return fail("请选择图片");
            }

            //获取图片扩展名
            String originalFilename = file.getOriginalFilename();
            String extName = file.getOriginalFilename().substring(originalFilename.lastIndexOf(".") + 1);
            String fileName = RandomUtil.randomUUID() + "." + extName;
            String picUrl = ToolOssUtil.uploadFile(file.getBytes(), "/upload/" + fileName);

            if (StringUtil.isNotBlank(picUrl)) {
//                UploadResponse response = JSON.parseObject(picUrl, UploadResponse.class);
//                url = String.valueOf(response.getData().get("fileId"));
                resultEntity.setCode(ResultEntity.SUCCESS);
                resultEntity.setMessage("图片上传成功");
                Map<String, Object> data = new HashMap<>();
                data.put("imgUrl", picUrl);
                System.out.println("图片地址 ：" + picUrl);
                resultEntity.setData(data);
            } else {
                return fail("上传失败！");
            }
        } catch (Exception e) {
            return fail("上传失败！");
        }
        return resultEntity;
    }

 

 

上传工具

上传

/**
     * 上传文件
     *
     * @param file_buff
     * @param filePath
     * @return
     */

    public static String uploadFile(final byte[] file_buff, final String filePath) {
        final String path = BASE_PATH + filePath;
        ossClient(o -> o.putObject(BUCKETNAME, path, new ByteArrayInputStream(file_buff)));
        return path;
    }
    private static void ossClient(Consumer<OSSClient> consumer) {
        OSSClient ossClient = new OSSClient(ENDPOINT, ACCESSKEYID, ACCESSKEYSECRET);
        try {
            consumer.accept(ossClient);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException("文件上传失败");
        } finally {
            // 关闭client
            ossClient.shutdown();
        }
    }

需要注意的是，原本的 spring boot 自带的 MultipartFile 属性 在这是获取不到页面上的文件，必须要HttpServletRequest 方式才能获取到  刚开始的时候，我以为需要在配置文件中配置一些东西就可以的，RBL，还费事费时，当然，其中的上传工具类是需要自己的写的，我这个是上传到阿里云的，如果有什么不清楚的可以去看看他们的接口文档。还有一点 表单的属性 content-type  一定要注意 要用 multipart/form-data 不然后台拿不到前台的数据，有什么不懂的可以去看看http协议，我也有写。