fjy8018/cms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
F嘉阳
2018-02-04 21:26:04 +08:00
parent c1720842e1
commit cd17163b67
9 changed files with 88 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/application-dev.yml
View File

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

64
src/main/resources/static/js/homePage.js
View File

@@ -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);
},

14
src/main/resources/templates/home/home.html
View File

@@ -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>

8
src/main/resources/templates/home/home2.html
View File

@@ -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">