SpringBoot使用MultipartFile接口实现文件上传

 前端部分:

使用的是bootstrap模板实现的表单

注意form表单需要加enctype="multipart/form-data"属性

AJAX请求 

$(function () {
    // 点击表单 uploadForm 的点击按钮时,触发 upload 函数
    $("#uploadForm").submit(upload);
});

function upload() {
    $.ajax({
        url: "http://localhost:8080/User/UploadPhoto",
        method: "post",
        processData: false, // 不要把表单内容转换成字符串
        contentType: false, // 不要 Jquery 自动设置上传的类型
        data: new FormData($("#uploadForm")[0]),
        success: function (data) {
            if (data.code == 200) {
                alert("上传成功")
            } else {
                alert("上传失败")
            }
        }
    });
    return false; // 表示事件到此为止,不要再提交表单了了
}

后端接口部分(是SpringBoot工程实现的接口)

 /**
     * @Author: zheng
     * @Description:上传头像
     * @Date:
     */
    @PostMapping("/UploadPhoto")
    public R UploadPhoto(MultipartFile file) {

        if (file.isEmpty()) {
            throw new BlogException("文件不能为空");
        }

        // 获取文件名
        String filename = file.getOriginalFilename();
        log.debug("上传的文件名为:" + filename);

        // 获取文件后缀名
        String substring = filename.substring(filename.lastIndexOf("."));
        log.debug("上传的文件的后缀为:", substring);

        // 设置文件的存储路径
        String filepath = "D:\\2108\\workspaces\\blog\\target\\classes\\static\\img\\";
        String path = filepath + filename;
        File dest = new File(path);

        try {
            // 写入文件
            file.transferTo(dest);

            // 修改当前登录用户的头像地址
            Token token = help.get();
            Integer uid = token.getUid();

            String newHeadUrl = "/img/" + filename;
            boolean ans = tUserService.updateHeadUrl(uid, newHeadUrl);

            if (ans) {
                return R.succ("添加成功");
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return R.fail("添加失败");
    }

你可能感兴趣的:(spring,java-ee)