SpringBoot实现文件上传

最新推荐文章于 2024-07-20 15:55:45 发布

程序员小徐0312

最新推荐文章于 2024-07-20 15:55:45 发布

阅读量160

点赞数 1

本文链接：https://blog.csdn.net/weixin_44515456/article/details/104682879

版权

学习松哥的SpringBoot+Vue全栈开发实战，做一下笔记！

后端代码：

@RestController
public class FileUploadController {

    SimpleDateFormat sf = new SimpleDateFormat("/yyyy/MM/dd/");

    /**
     * 单文件上传
     * @param file
     * @param request
     * @return
     */
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public String upload(MultipartFile file, HttpServletRequest request){
        //当前日期生成的
        String format = sf.format(new Date());
        //真实路径
        String realPath = request.getServletContext().getRealPath("/img")+ format;
        //
        File folder = new File(realPath);
        if(!folder.exists()){
            folder.mkdirs();
        }
        String oldName = file.getOriginalFilename();
        String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
        try {
            file.transferTo(new File(folder,newName));
            String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/img"+format+newName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "error";
    }

    /**
     * 多文件上传
     * @param files
     * @param request
     * @return
     */
    @RequestMapping(value = "/uploads",method = RequestMethod.POST)
    public String uploads(@RequestParam("files") MultipartFile[] files, HttpServletRequest request){
        //当前日期生成的
        String format = sf.format(new Date());
        //真实路径
        String realPath = request.getServletContext().getRealPath("/img")+ format;
        //创建文件存放上传的文件
        File folder = new File(realPath);
        if(!folder.exists()){
            folder.mkdirs();
        }
        for (MultipartFile file : files) {
            String oldName = file.getOriginalFilename();
            String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
            try {
                file.transferTo(new File(folder,newName));
                String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/img"+format+newName;
                System.out.println(url);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return "success";
    }
}

前端代码：
1.单文件表单上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="提交">
</form>
</body>
</html>

2.单文件ajax上传

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="/jquery-3.1.1.min.js" type="text/javascript"></script>

</head>
<body>
<div id="result"></div>
<input type="file" id="file">
<input type="button" value="上传" onclick="uploadFile()">
<script>
    function uploadFile() {
        var file = $("#file")[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            type:'post',
            url:'/upload',
            processData:false,
            contentType:false,
            data:formData,
            success:function(msg){
                $("#result").html(msg);
            }
        })
    }
</script>
</body>
</html>

3.多文件表单上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form action="/uploads" method="post" enctype="multipart/form-data">
    <input type="file" name="files" id="files" multiple>
    <input type="submit" value="提交">
</form>
</body>
</html>