文件上传组件IE9适配

[!TIP]
因为elementUI的文件上传组件不兼容IE9，本工程采用layUI的上传组件，layUI文件上传组件底层采用的是jquery的上传组件，兼容ie9

更多关于layUI文件上传组件可以参考：https://www.layui.com/demo/upload.html

前端页面

[!DANGER|label: 此案例建立在入门工程前端开发的基础上，请完成入门开发指南中的前端工程搭建再进行此案例。 前端工程搭建]

1.在入门开发指南中建立的todo-views工程中的resources目录下创建一个目录，目录名称templates/upload
uploadPath.png
2.在resources/templates/test目录下创建 file_upload.html 文件，并将下方内容复制进去

  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <html lang="en" xmlns:th="http://www.springframework.org/schema/mvc">
  4. <head>
  5.     <!--公共模块引入-->
  6.     <div th:include="../templates/include/sys/common::sys_core"></div>
  7.     <!--layUI引入-->
  8.     <link rel="stylesheet" th:href="@{/static/plugins/layui/css/layui.css}">
  9.     <script th:src="@{/static/plugins/layui/layui.js}"></script>
  10. </head>
  11. <body>
  12. <div id="app">
  13.     <button type="button" class="layui-btn" id="test"><i class="layui-icon"></i>上传文件</button>
  14. </div>
  16. <script>
  17.     layui.use('upload', function() {
  18.         var $ = layui.jquery, upload = layui.upload;
  19.         upload.render({
  20.             elem: '#test',
  21.             // 服务器上传接口（请修改为自己的上传接口），示例中的baseUrl为views工程中定义的后端工程前缀全局变量
  22.             url: baseUrl+ '/test/fileUpload?token='+getToken(),
  23.             // 设置允许上传的文件类型
  24.             accept: 'file',
  25.             // 允许上传的文件后缀
  26.             // exts:'txt',
  27.             // 上传接口完成的回调
  28.             done: function(res){
  29.                 if(res.code=="200") {
  30.                     vm.$message({
  31.                         message: '上传成功',
  32.                         type: 'success'
  33.                     });
  34.                 }
  35.                 if(res.code=="500"){
  36.                     vm.$message({
  37.                         message:'上传失败',
  38.                         type:'error'
  39.                     });
  40.                 }
  41.             }
  42.         })
  43.     });
  44.     new Vue({
  45.         /**
  46.          * 将vue中的this混入，在这里为了调用elementUI中的$message消息框
  47.          */
  48.         mixins: [vmMixins]
  49.     })
  50. </script>
  51. </body>
  52. </html>

添加页面跳转接口Controller

在views/controller目录下创建页面跳转接口Controller：PageJumpController,并将下方代码复制进去。
pageControllerPath.png

  1. package com.ustcinfo.ishare.eip.todo.views.controller;
  2. import io.swagger.annotations.Api;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.GetMapping;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  7. @Controller
  8. @RequestMapping("/views/page")
  9. @Api(tags = "跳转文件上传测试页面接口")
  10. public class PageJumpController {
  12.     /**
  13.      * 跳转至文件上传页面
  14.      * @return
  15.      */
  16.     @GetMapping("/fileUpload")
  17.     public String toFileUpload(){
  18.         return "upload/file_upload";
  19.     }
  20. }

[!TIP]
如出现token验证问题无法跳转页面或访问接口，请尝试登陆系统后再进行页面访问和文件上传