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

2018-02-04 21:26:04 +08:00
parent c1720842e1
commit cd17163b67
9 changed files with 88 additions and 59 deletions
--- a/src/main/java/com/fjy/spring/controller/DownLoadController.java
+++ b/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);
-
-        TbFile tbFile = fileService.findFile(file);
+        file.setColfileid(fileId);
+        TbFile tbFile = fileService.findFileById(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());
--- a/src/main/java/com/fjy/spring/controller/NavController.java
+++ b/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";
+    }
 }
--- a/src/main/java/com/fjy/spring/controller/UpLoadController.java
+++ b/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.setColfilepath(uploadUrl + file.getName());
+            tbFile.setColfilename(filename);
+            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";
    }
 }
--- a/src/main/java/com/fjy/spring/properties/ServerProperties.java
+++ b/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;
--- a/src/main/java/com/fjy/spring/service/FileService.java
+++ b/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();
+    }
+


 }
--- a/src/main/resources/application-dev.yml
+++ b/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/
--- a/src/main/resources/static/js/homePage.js
+++ b/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: [{
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-08',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-06',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-07',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }]
+            DownloadList: [
+                {
+                    colfileid: 9,
+                    coluserid: 0,
+                    colip: '0:0:0:0:0:0:0:1',
+                    colrealname: '234234',
+                    colfilename: '10K.jpg',
+                    colfilesize: '21.78KB',
+                    colfilepath: 'C:\\Users\\11860\\AppData\\Local\\Temp\\tomcat-docbase.8051654935022807536.8080\\upload/10K.jpg'
+                },
+                {
+                    colfileid: 15,
+                    coluserid: 0,
+                    colip: '0:0:0:0:0:0:0:1',
+                    colrealname: null,
+                    colfilename: '10K.jpg',
+                    colfilesize: '21.78KB',
+                    colfilepath: 'F:\\JAVA Workspace\\Temp\\upload/10K.jpg'
+                }
+            ]
        };
    },
    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);
        },
--- a/src/main/resources/templates/home/home.html
+++ b/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>
--- a/src/main/resources/templates/home/home2.html
+++ b/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-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="colip" label="地址">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="150">
                                    <template slot-scope="scope">