https://gitee.com/dafran/file_upload

    Controller

    1. @RestController
    2. public class FileUploadController {
    3.     //时间格式化区分
    4.     SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
    6.     @PostMapping("/upload")
    7.     public Map<String, Object> fileUpload(MultipartFile file, HttpServletRequest req) {
    8.         Map<String, Object> result = new HashMap<>();
    9.         //文件原始名
    10.         String originName = file.getOriginalFilename();
    11.         //判断是否是pdf文件
    12.         if (!originName.endsWith(".pdf")) {
    13.             result.put("status","error");
    14.             result.put("msg","文件类型错误");
    15.             return result;
    16.         }
    17.         //日期
    18.         String format = sdf.format(new Date());
    19.         //保存文件文件夹。获取的是当前项目路径,可以写死
    20.         String realPath = req.getServletContext().getRealPath("/") + format;
    21.         File folader = new File(realPath);
    22.         //是否有文件夹,没有则创建
    23.         if (!folader.exists()) {
    24.             folader.mkdirs();
    25.         }
    26.         //新文件名
    27.         String newName = UUID.randomUUID().toString()+".pdf";
    29.         try {
    30.             file.transferTo(new File(folader,newName));
    31.             String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newName;
    32.             result.put("status","success");
    33.             result.put("url",url);
    34.         } catch (IOException e) {
    35.             result.put("status","error");
    36.             result.put("msg",e.getMessage());
    37.         }
    39.         return result;
    40.     }
    41. }

    前端页面渲染

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    9. <body>
    10. <div id="app">
    11.     <el-upload
    12.             action="/upload"
    13.             :on-preview="handlePreview"
    14.             accept=".pdf"
    15.             :limit="10">
    16.         <el-button size="small" type="primary">点击上传</el-button>
    17.         <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
    18.     </el-upload>
    19. </div>
    20. <!--import Vue before Element-->
    21. <script src="https://unpkg.com/vue/dist/vue.js"></script>
    22. <!--import JavaScript-->
    23. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    25. <script>
    26. new Vue({
    27.     el: '#app',
    28.     methods:{
    29.         handlePreview(file) {
    30.             window.open(file.response.url);
    31.         }
    32.     }
    33. })
    34. </script>
    36. </body>
    37. </html>