实现多文件上传，按钮vue传值（vue2.1特性）

src/main/java/com/fjy/spring/controller/DownLoadController.java

@@ -21,10 +21,10 @@ public class DownLoadController {
     @Autowired
     private FileService fileService;
 
-    @GetMapping("/download")
+    /*@GetMapping("/download")
     public String toDownloadPage(){
-        return "download";
+        return "download/dodownload";
-    }
+    }*/
 
     @GetMapping("/download/findall")
     @ResponseBody
@@ -37,7 +37,7 @@ public class DownLoadController {
     }
 
     @RequestMapping("/download/dodownload")
-    public String download(@RequestParam String fileName , HttpServletRequest request, HttpServletResponse response){
+    public String download(@RequestParam Integer fileId , HttpServletRequest request, HttpServletResponse response){
 
         response.setContentType("text/html;charset=utf-8");
         try {
@@ -49,19 +49,20 @@ public class DownLoadController {
         java.io.BufferedOutputStream bos = null;
 
         TbFile file = new TbFile();
-        file.setColfilename(fileName);
+        file.setColfileid(fileId);
-
+        TbFile tbFile = fileService.findFileById(file);
-        TbFile tbFile = fileService.findFile(file);
+        //TbFile tbFile = fileService.findFile(file);
 
         System.out.println(tbFile.getColfilepath());
 
         String ctxPath = tbFile.getColfilepath();
-        String downLoadPath = ctxPath + fileName;
+        String downLoadPath = ctxPath;
+        //String downLoadPath = ctxPath + tbFile.getColfilename();
         System.out.println(downLoadPath);
         try {
             long fileLength = new File(downLoadPath).length();
             response.setContentType("application/x-msdownload;");
-            response.setHeader("Content-disposition", "attachment; filename=" + new String(fileName.getBytes("utf-8"), "ISO8859-1"));
+            response.setHeader("Content-disposition", "attachment; filename=" + new String(tbFile.getColfilename().getBytes("utf-8"), "ISO8859-1"));
             response.setHeader("Content-Length", String.valueOf(fileLength));
             bis = new BufferedInputStream(new FileInputStream(downLoadPath));
             bos = new BufferedOutputStream(response.getOutputStream());

src/main/java/com/fjy/spring/controller/NavController.java

@@ -14,4 +14,9 @@ public class NavController {
     public String toTestPage(){
         return "/dist/thymeleafTest";
     }
+
+    @GetMapping(value = {"axiosTest"})
+    public String toTestAxiosPage(){
+        return "/dist/axiosTest";
+    }
 }

src/main/java/com/fjy/spring/controller/UpLoadController.java

@@ -60,7 +60,8 @@ public class UpLoadController {
     @RequestMapping(value = "/oneUpload")
     public String oneUpload(@RequestParam("imageFile") MultipartFile imageFile, HttpServletRequest request) {
 
-        String uploadUrl = request.getSession().getServletContext().getRealPath("/") + "upload/";
+        //String uploadUrl = request.getSession().getServletContext().getRealPath("/") + "upload/";
+        String uploadUrl =  serverProperties.getFilePath()+ "upload/";
         String filename = imageFile.getOriginalFilename();
         File dir = new File(uploadUrl);
         if (!dir.exists()) {//判断目录是否存在，否则自动创建
@@ -116,13 +117,13 @@ public class UpLoadController {
      * @return
      */
     @RequestMapping("/moreUpload")
-    public String moreUpload(HttpServletRequest request) {
+    public void moreUpload(HttpServletRequest request) {
 
         MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
         Map<String, MultipartFile> files = multipartHttpServletRequest.getFileMap();
 
-        String uploadUrl = request.getSession().getServletContext().getRealPath("/") + "upload/";
+        //String uploadUrl = request.getSession().getServletContext().getRealPath("/") + "upload/";
-
+        String uploadUrl = serverProperties.getFilePath()+ "upload/";
 
         File dir = new File(uploadUrl);
         if (!dir.exists()) {
@@ -132,13 +133,17 @@ public class UpLoadController {
         List<String> fileList = new ArrayList<String>();
 
         for (MultipartFile file : files.values()) {
-            File targetFile = new File(uploadUrl + file.getOriginalFilename());
+            String filename = file.getOriginalFilename();
+            File targetFile = new File(uploadUrl + filename);
 
+            System.out.println("文件上传到: " + uploadUrl + filename);
+            System.out.println("文件大小: " + new FormatFileSizeUtil().GetFileSize(file.getSize()));
+            System.out.println("文件名: " + filename);
 
             TbFile tbFile = new TbFile();
             tbFile.setColfilesize(new FormatFileSizeUtil().GetFileSize(file.getSize()));
-            tbFile.setColfilename(file.getName());
+            tbFile.setColfilename(filename);
-            tbFile.setColfilepath(uploadUrl + file.getName());
+            tbFile.setColfilepath(uploadUrl + filename);
             tbFile.setColip(request.getRemoteAddr());
 
             if (fileService.addFile(tbFile))
@@ -167,9 +172,5 @@ public class UpLoadController {
 
             }
         }
-
-        request.setAttribute("files", fileList);
-
-        return "moreUploadResult";
     }
 }

src/main/java/com/fjy/spring/properties/ServerProperties.java

@@ -7,6 +7,15 @@ import org.springframework.stereotype.Component;
 @ConfigurationProperties(prefix = "serverproperties")
 public class ServerProperties {
     private String portNum;
+    private String filePath;
+
+    public String getFilePath() {
+        return filePath;
+    }
+
+    public void setFilePath(String filePath) {
+        this.filePath = filePath;
+    }
 
     public String getPortNum() {
         return portNum;

src/main/java/com/fjy/spring/service/FileService.java

@@ -30,6 +30,10 @@ public class FileService {
         return tbFileRepository.findAll();
     }
 
+    public TbFile findFileById(TbFile tbFile){
+        return tbFileRepository.findById(tbFile.getColfileid()).get();
+    }
+
 
 
 }

src/main/resources/application-dev.yml

@@ -5,6 +5,7 @@ server:
   port: 8080
 serverproperties:
   port_num: 8080
+  filePath: F:\JAVA Workspace\Temp\
 spring:
   thymeleaf:
     prefix: classpath:/templates/

src/main/resources/static/js/homePage.js

@@ -1,3 +1,11 @@
+axios.get('http://localhost:8080/cms/download/findall')
+    .then(function (response) {
+        console.log(response);
+        resolve(response.data);
+    })
+    .catch(function (error) {
+        console.log(error);
+    });
 var Main = {
     data() {
         return {
@@ -10,44 +18,42 @@ var Main = {
                 name: 'food2.jpeg',
                 url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
             }],
-            tableData3: [{
+            DownloadList: [
-                date: '2016-05-03',
+                {
-                name: '王小虎',
+                    colfileid: 9,
-                address: '上海市普陀区金沙江路 1518 弄'
+                    coluserid: 0,
-            }, {
+                    colip: '0:0:0:0:0:0:0:1',
-                date: '2016-05-02',
+                    colrealname: '234234',
-                name: '王小虎',
+                    colfilename: '10K.jpg',
-                address: '上海市普陀区金沙江路 1518 弄'
+                    colfilesize: '21.78KB',
-            }, {
+                    colfilepath: 'C:\\Users\\11860\\AppData\\Local\\Temp\\tomcat-docbase.8051654935022807536.8080\\upload/10K.jpg'
-                date: '2016-05-04',
+                },
-                name: '王小虎',
+                {
-                address: '上海市普陀区金沙江路 1518 弄'
+                    colfileid: 15,
-            }, {
+                    coluserid: 0,
-                date: '2016-05-01',
+                    colip: '0:0:0:0:0:0:0:1',
-                name: '王小虎',
+                    colrealname: null,
-                address: '上海市普陀区金沙江路 1518 弄'
+                    colfilename: '10K.jpg',
-            }, {
+                    colfilesize: '21.78KB',
-                date: '2016-05-08',
+                    colfilepath: 'F:\\JAVA Workspace\\Temp\\upload/10K.jpg'
-                name: '王小虎',
+                }
-                address: '上海市普陀区金沙江路 1518 弄'
+            ]
-            }, {
-                date: '2016-05-06',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-07',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }]
         };
     },
     methods: {
+        handleClick(row) {
+            console.log(row.colfileid);
+        },
         submitUpload() {
             this.$refs.upload.submit();
         },
         handleRemove(file, fileList) {
             console.log(file, fileList);
         },
+        handleDownload(row){
+            /*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
+            window.open("http://localhost:8080/cms/download/dodownload?fileId="+row.colfileid);
+        },
         handlePreview(file) {
             console.log(file);
         },

src/main/resources/templates/home/home.html

@@ -5,6 +5,7 @@
 </head>
 <body>
 <div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <div id="app">
     <el-container>
         <el-aside th:include="dist/thymeleaf/layout :: asider"></el-aside>
@@ -14,7 +15,7 @@
                 <el-row>
                     <el-col :md="12" :lg="12" :xl="12">
                         <div class="grid-content bg-purple-dark">
-                            <el-upload class="upload-demo" ref="upload" action="/cms/oneUpload" :on-preview="handlePreview" :on-remove="handleRemove"
+                            <el-upload class="upload-demo" ref="upload" action="/cms/moreUpload" :on-preview="handlePreview" :on-remove="handleRemove"
                                        :file-list="fileList" :auto-upload="false" name="imageFile">
                                 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                 <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
@@ -28,16 +29,17 @@
                 <el-row>
                     <el-col :md="24" :lg="12" :xl="12">
                         <div class="grid-content bg-purple-dark">
-                            <el-table :data="tableData3" height="250" border style="width: 100%">
+
-                                <el-table-column prop="date" label="日期" width="180">
+                            <el-table :data="DownloadList" height="250" border style="width: 100%">
+                                <el-table-column prop="colfilename" label="文件名" width="180">
                                 </el-table-column>
-                                <el-table-column prop="name" label="姓名" width="180">
+                                <el-table-column prop="colfilesize" label="大小" width="80">
                                 </el-table-column>
-                                <el-table-column prop="address" label="地址">
+                                <el-table-column prop="colfileid" label="地址">
                                 </el-table-column>
                                 <el-table-column fixed="right" label="操作" width="150">
                                     <template slot-scope="scope">
-                                        <el-button @click="handleClick(scope.row)" type="success" plain size="small">
+                                        <el-button @click="handleDownload(scope.row)" type="success" plain size="small">
                                             下载
                                         </el-button>
                                         <el-button type="danger" plain size="small">删除</el-button>

src/main/resources/templates/home/home2.html

@@ -83,12 +83,12 @@
                 <el-row>
                     <el-col :md="24" :lg="12" :xl="12">
                         <div class="grid-content bg-purple-dark">
-                            <el-table :data="tableData3" height="250" border style="width: 100%">
+                            <el-table :data="DownloadList" height="250" border style="width: 100%">
-                                <el-table-column prop="date" label="日期" width="180">
+                                <el-table-column prop="colfilename" label="文件名" width="180">
                                 </el-table-column>
-                                <el-table-column prop="name" label="姓名" width="180">
+                                <el-table-column prop="colfilesize" label="大小" width="80">
                                 </el-table-column>
-                                <el-table-column prop="address" label="地址">
+                                <el-table-column prop="colip" label="地址">
                                 </el-table-column>
                                 <el-table-column fixed="right" label="操作" width="150">
                                     <template slot-scope="scope">