分享的下载

driver/src/main/java/xyz/longicorn/driver/controller/DownloadController.java

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

web/src/pages/Share.vue

@@ -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>
-                        <el-table :data="fileListData" style="width: 100%">
+                        </div>
+                        <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
-
         /**
          * 分享信息有误
          */
@@ -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,
+            submitView, fileListData, showChild, fileTable,
-            ...strings,
+            ...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>