分享的下载
This commit is contained in:
parent
688d08d904
commit
d3c0bd0383
@ -0,0 +1,56 @@
|
||||
package xyz.longicorn.driver.controller;
|
||||
|
||||
import cn.hutool.core.net.URLEncodeUtil;
|
||||
import cn.hutool.http.HttpUtil;
|
||||
import lombok.SneakyThrows;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import xyz.longicorn.driver.pojo.FileInfo;
|
||||
import xyz.longicorn.driver.service.FileService;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import javax.servlet.ServletOutputStream;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import java.io.FileInputStream;
|
||||
import java.io.InputStream;
|
||||
import java.net.URL;
|
||||
import java.net.URLConnection;
|
||||
|
||||
@RestController
|
||||
public class DownloadController {
|
||||
@Resource
|
||||
private FileService fileService;
|
||||
|
||||
@SneakyThrows
|
||||
@RequestMapping("/download")
|
||||
public void download(String id, HttpServletResponse response) {
|
||||
System.out.println(id);
|
||||
String[] idList = id.split(",");
|
||||
final FileInfo file = fileService.getById(id);
|
||||
// TODO 验证文件的信息
|
||||
|
||||
response.setHeader("Content-Disposition", "attachment; filename="+file.getName()
|
||||
+"; filename*=utf-8''" + URLEncodeUtil.encode(file.getName()));
|
||||
final ServletOutputStream os = response.getOutputStream(); // 获取网络输出流
|
||||
InputStream is = null;
|
||||
if(file.getPath().startsWith("http")){
|
||||
// 对于网络文件 直接 先下载在输出
|
||||
URL url = new URL(file.getPath());
|
||||
URLConnection connection = url.openConnection(); // 通过网址打开一个连接
|
||||
is = connection.getInputStream();//获取文件内容的输入流
|
||||
}else{
|
||||
is = new FileInputStream(file.getPath()); // 获取文件输入流
|
||||
}
|
||||
|
||||
byte[] bytes = new byte[10240];
|
||||
int len;
|
||||
while ((len = is.read(bytes)) != -1) {
|
||||
os.write(bytes, 0, len);
|
||||
}
|
||||
os.close();
|
||||
is.close();
|
||||
|
||||
// response.getWriter().println("xxx");
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,3 +1,111 @@
|
||||
<style scoped lang="less">
|
||||
.password-box {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #eef1f6;
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
fill: var(--el-color-primary);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.password-box-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-inner {
|
||||
width: 500px;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box-wrapper {
|
||||
padding: 40px 50px 50px;
|
||||
}
|
||||
|
||||
.box-inner {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.share-file-content-box {
|
||||
|
||||
.share-info {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.file-title {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.other-info {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.share-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.share-content-wrapper {
|
||||
height: 100vh;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.share-file-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
padding: 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.list-file-info {
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.list-file-icon {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-file-name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.file-type-folder {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-share">
|
||||
<div v-if="loadingData">
|
||||
@ -41,13 +149,22 @@
|
||||
<span>{{ formatDate(shareInfo.createTime, 'YYYY-MM-DD HH:mm') }}</span>
|
||||
<span>{{ shareInfo.live == -1 ? '长期有效' : (shareInfo.live / 3600 / 24 + '天') }}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button @click="downloadSelect">下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="fileListData" style="width: 100%">
|
||||
<div>
|
||||
<el-link v-if="$route.query.path && $route.query.path != '/'" @click="$router.back()">
|
||||
返回上一级
|
||||
</el-link>
|
||||
</div>
|
||||
<el-table ref="fileTable" :data="fileListData" style="width: 100%">
|
||||
<el-table-column type="selection"/>
|
||||
<el-table-column label="名称">
|
||||
<!-- 自定义单元格内容 -->
|
||||
<template #default="file">
|
||||
<div class="list-file-info" @click="showChild(file.row)">
|
||||
<div class="list-file-info" :class="'file-type-' + file.row.type"
|
||||
@click="showChild(file.row)">
|
||||
<FileIcon class="list-file-icon" style="width: 40px;" :file="file.row"
|
||||
:ext="file.row.type"/>
|
||||
<span class="list-file-name">{{ file.row.name }}</span>
|
||||
@ -86,10 +203,9 @@ import FileIcon from "../components/FileIcon.vue";
|
||||
export default {
|
||||
name: "Share",
|
||||
components: {AppLogo, FileIcon},
|
||||
setup(props) {
|
||||
setup(props, ctx) {
|
||||
const route = useRoute();
|
||||
const id = route.params.id // 获取动态路由的参数 实例: this.$route.params.id
|
||||
|
||||
/**
|
||||
* 分享信息有误
|
||||
*/
|
||||
@ -175,7 +291,7 @@ export default {
|
||||
}).catch(e => console.log(e.message));
|
||||
}
|
||||
const router = useRouter()
|
||||
watchEffect(()=>{
|
||||
watchEffect(() => {
|
||||
showShareFiles()
|
||||
})
|
||||
// 显示下一级目录
|
||||
@ -184,98 +300,24 @@ export default {
|
||||
const currentPath = route.query.path || '';
|
||||
router.push('?path=' + currentPath + '/' + file.name)
|
||||
};
|
||||
const fileTable = ref()
|
||||
const downloadSelect = () => {
|
||||
// 1.直接通过文件编号构建下载链接(今天使用)
|
||||
// 2.通过文件编号创建下载任务，然后再下载(更好)
|
||||
// console.log()
|
||||
const url = 'http://localhost:8080/download?id='
|
||||
const idArr = [];
|
||||
fileTable.value.getSelectionRows().forEach(f => idArr.push(f.id));
|
||||
// const idList = fileTable.value.getSelectionRows().map(f=>f.id)
|
||||
// console.log(idArr,idList)
|
||||
location.href = url + idArr.join(',')
|
||||
|
||||
}
|
||||
return {
|
||||
shareError, loadingData, shareInfo, passwordBox, shareUser,
|
||||
submitView, fileListData, showChild,
|
||||
...strings,
|
||||
submitView, fileListData, showChild, fileTable,
|
||||
...strings, downloadSelect
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.password-box {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #eef1f6;
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
fill: var(--el-color-primary);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.password-box-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-inner {
|
||||
width: 500px;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box-wrapper {
|
||||
padding: 40px 50px 50px;
|
||||
}
|
||||
|
||||
.box-inner {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.share-file-content-box {
|
||||
}
|
||||
|
||||
.share-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.share-content-wrapper {
|
||||
height: 100vh;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.share-file-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
padding: 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.list-file-info {
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.list-file-icon {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-file-name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user