springboot实现前端用户上传图片保存到本地文件夹

前言

使用技术：ajax springboot

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端html主要代码

代码如下（示例）：

<div id="main">
    <form  method="post"  action="addparent"  enctype="multipart/form-data" >
        <p class="clear"></p>
        <hr>
        <div class="info-left" id="camera">
            <input id="file" type="file"   style="display:none"   name="file"  onchange="upImg()">
            <img src="../asserts/images/uploadimg.png"  alt="上传照片"  id="img" onclick="file.click()">
        </div>
    </form>
</div>

二、前端js

代码如下（示例）：

function upImg() {
        var fileObj = document.getElementById("file").files[0];//可以正常获取文件对象
        var FileController = "/addparent";
        if(!fileObj.type.match('image.*')){
            alert("请选择正确的图片");
        }else{
            var form = new FormData();//通过FormData构造函数创建一个空对象
            form.append("file",fileObj);//可以通过append()方法来追加数据
            var xhr = new XMLHttpRequest();调用GetXmlHttpRequest()并事例化GET,使用XMLHttpRequest 来发送 HTTP 请求以实现网站和服务器之间的数据交换。
            //Ajax 给 XMLHttpReq.onreadystatechange传递参数
            //readyState=0,1,2,3,4
            // 0: 请求未初始化
            // 1: 服务器连接已建立
            // 2: 请求已接收
            // 3: 正在处理请求
            // 4: 请求已完成且响应已就绪
            //readyState=200.403,404
            // 200: "OK"
            // 403: "Forbidden"
            // 404: "Page not found"
            xhr.onreadystatechange=function () {
                if(this.readyState == 4 && this.status == 200){
                    var b = this.responseText;//接收返回的TEXT OR XML 文档
                    if(b == "success"&&(fileObj.type.match('image.*'))){
                        alert("上传成功！");
                    }
                }
            };
            xhr.open("post", FileController, true);//规定请求的类型、URL 以及是否异步处理请求。
            xhr.send(form);//将请求发送到服务器。
        }
    }

三、后端控制层主要代码

代码如下（示例）：

@Controller
public class FileController implements WebMvcConfigurer {
    @PostMapping("/addparent")
    @ResponseBody
    public String upFile(@RequestParam("file") MultipartFile file, Map map) {
        String path = "E:\\idea 专用文件夹\\用户上传图片到文件夹\\src\\main\\resources\\static\\img";
        String fileName = file.getOriginalFilename();//获取文件名称
        String suffixName=fileName.substring(fileName.lastIndexOf("."));//获取文件后缀
        fileName= UUID.randomUUID()+suffixName;//重新生成文件名
        System.out.println(fileName);
        System.out.println("type::" + suffixName);
        System.out.println("filename::" + fileName);
        File targetFile = new File(path);
        if (!targetFile.exists()) {
            // 判断文件夹是否未空，空则创建
            targetFile.mkdirs();
        }
        File saveFile = new File(targetFile, fileName);
        try {
            //指定本地存入路径
            file.transferTo(saveFile);
            System.out.println("执行成功");
            String path1 = path + fileName;
            System.out.println(path1);
            //     return "success";
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("执行失败");
            return "failed";
        }
        map.put("img",fileName);//Java 集合类中的 Map.put() 方法将获取 Map 集合的所有键名，并存放在一个 Set 集合对象中。
        System.out.println("11111");
        return "success";
    }
    @RequestMapping("/1")
    //前端html页面为ht.html
    public String header(){
        return "ht";
    }
}

---

参考链接：java前端上传图片保存到本地文件夹

亲测可用，这里参考别人代码加了一些注释方便了解意思。