devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3项目Easy云盘（二）：文件列表+新建目录+文件重命名+文件上传_vue

作者：花生_TL007 | 2024-05-17 14:18:39

赞

踩

vue

一、文件列表

1.封装全局组件Table.vue

因为Main.vue等都会用到文件列表table，所以直接封装成组件。

src/components/Table.vue

  1. <template>
  2.   <!-- 表格 -->
  3.   <div>
  4.     <el-table
  5.       ref="dataTable"
  6.       :data="dataSource.list || []"
  7.       :height="tableHeight"
  8.       :stripe="options.stripe"
  9.       :border="options.border"
  10.       header-row-class-name="table-header-row"
  11.       highlight-current-row
  12.       @row-click="handleRowClick"
  13.       @selection-change="handleSelectionChange"
  14.     >
  15.       <!-- selection 选择框 -->
  16.       <el-table-column
  17.         v-if="options.selectType && options.selectType == 'checkbox'"
  18.         type="selection"
  19.         width="50"
  20.         align="center"
  21.       ></el-table-column>
  22.       <!-- 序号 -->
  23.       <el-table-column
  24.         v-if="options.showIndex"
  25.         label="序号"
  26.         type="index"
  27.         width="60"
  28.         align="center"
  29.       ></el-table-column>
  30.       <!-- 数据列 -->
  31.       <template v-for="(column, index) in columns">
  32.         <!-- 如果数据列中有插槽， 将其改造成插槽 -->
  33.         <template v-if="column.scopedSlots">
  34.           <el-table-column
  35.             :key="index"
  36.             :prop="column.prop"
  37.             :label="column.label"
  38.             :align="column.align || 'left'"
  39.             :width="column.width"
  40.           >
  41.             <template #default="scope">
  42.               <slot
  43.                 :name="column.scopedSlots"
  44.                 :index="scope.$index"
  45.                 :row="scope.row"
  46.               >
  47.               </slot>
  48.             </template>
  49.           </el-table-column>
  50.         </template>
  51.         <!-- 如果不是插槽，就正常操作 -->
  52.         <template v-else>
  53.           <el-table-column
  54.             :key="index"
  55.             :prop="column.prop"
  56.             :label="column.label"
  57.             :align="column.align || 'left'"
  58.             :width="column.width"
  59.             :fixed="column.fixed"
  60.           >
  61.           </el-table-column>
  62.         </template>
  63.       </template>
  64.     </el-table>
  65.  
  66.     <!-- 分页 -->
  67.     <!-- page-sizes 每页显示个数选择器的选项设置 -->
  68.     <!-- page-size 每页显示条目个数 -->
  69.     <!-- current-page 当前页数 -->
  70.     <!-- layout	组件布局，子组件名用逗号分隔 -->
  71.     <!-- size-change page-size 改变时触发 -->
  72.     <!-- current-change	current-page 改变时触发 -->
  73.     <div class="pagination" v-if="showPagination">
  74.       <el-pagination
  75.         v-if="dataSource.totalCount"
  76.         background
  77.         :total="dataSource.totalCount"
  78.         :page-sizes="[15, 30, 50, 100]"
  79.         :page-size="dataSource.pageSize"
  80.         :current-page.sync="dataSource.pageNo"
  81.         :layout="layout"
  82.         @size-change="handlePageSizeChange"
  83.         @current-change="handlePageNoChange"
  84.         style="text-align: right"
  85.       ></el-pagination>
  86.     </div>
  87.   </div>
  88. </template>
  89.  
  90. <script setup>
  91. import { ref, computed } from "vue";
  92.  
  93. // 将选中的行传递给父组件Main
  94. const emit = defineEmits(["rowSelected", "rowClick"]);
  95. // 子组件接受父组件的值
  96. const props = defineProps({
  97.   dataSource: Object,
  98.   showPagination: {
  99.     type: Boolean,
  100.     default: true,
  101.   },
  102.   showPageSize: {
  103.     type: Boolean,
  104.     default: true,
  105.   },
  106.   options: {
  107.     type: Object,
  108.     default: {
  109.       extHeight: 0,
  110.       showIndex: false,
  111.     },
  112.   },
  113.   columns: Array,
  114.   fetch: Function, // 获取数据的函数
  115.   initFetch: {
  116.     type: Boolean,
  117.     default: true,
  118.   },
  119. });
  120.  
  121. // 分页处布局
  122. const layout = computed(() => {
  123.   return `total, ${
  124.     props.showPageSize ? "sizes" : ""
  125.   }, prev, pager, next, jumper`;
  126. });
  127.  
  128. // 计算顶部高度
  129. //顶部 60 , 内容区域距离顶部 20， 内容上下内间距 15*2  分页区域高度 46
  130. const topHeight = 60 + 20 + 30 + 46;
  131.  
  132. // 计算当前表格高度，实现页面内部滚动
  133. const tableHeight = ref(
  134.   props.options.tableHeight
  135.     ? props.options.tableHeight
  136.     : window.innerHeight - topHeight - props.options.extHeight
  137. );
  138.  
  139. const init = () => {
  140.   if (props.initFetch && props.fetch) {
  141.     // 获取数据
  142.     props.fetch();
  143.   }
  144. };
  145. init();
  146.  
  147. const dataTable = ref();
  148. // 清除选中
  149. const clearSelection = () => {
  150.   dataTable.value.clearSelection();
  151. };
  152. // 设置行选中
  153. const setCurrentRow = (rowKey, rowValue) => {
  154.   let row = props.dataSource.list.find((item) => {
  155.     return item[rowKey] === rowValue;
  156.   });
  157.   dataTable.value.setCurrentRow(row);
  158. };
  159. // 将父组件最新的行信息更新到子组件中
  160. // 将子组件暴露出去，否则无法调用
  161. defineExpose({ setCurrentRow, clearSelection });
  162.  
  163. // 行点击
  164. const handleRowClick = (row) => {
  165.   emit("rowClick", row);
  166. };
  167. // 行选中(多行)
  168. const handleSelectionChange = (row) => {
  169.   emit("rowSelected", row);
  170. };
  171.  
  172. // 切换每页大小
  173. const handlePageSizeChange = (size) => {
  174.   props.dataSource.pageSize = size;
  175.   props.dataSource.pageNo = 1;
  176.   // 获取数据
  177.   props.fetch();
  178. };
  179.  
  180. // 切换页码
  181. const handlePageNoChange = (pageNo) => {
  182.   props.dataSource.pageNo = pageNo;
  183.   // 获取数据
  184.   props.fetch();
  185. };
  186. </script>
  187.  
  188. <style lang="scss" scoped>
  189. .pagination {
  190.   padding-top: 10px;
  191.   padding-right: 10px;
  192. }
  193. .el-pagination {
  194.   justify-content: right;
  195. }
  196.  
  197. :deep .el-table__cell {
  198.   padding: 4px 0px;
  199. }
  200. </style>

2.封装全局组件Icon.vue

因为需要展示上传文件，文件夹，图片，视频等的缩略图，所以，在Icon组件里面直接定义好各种类型显示的缩略图。

src/components/Icon.vue

  1. <template>
  2.   <!-- 图标 -->
  3.   <span :style="{ width: width + 'px', height: width + 'px' }" class="icon">
  4.     <img :src="getImage()" :style="{ 'object-fit': fit }" />
  5.   </span>
  6. </template>
  7.  
  8. <script setup>
  9. import { ref, reactive, getCurrentInstance } from "vue";
  10. const { proxy } = getCurrentInstance();
  11. const props = defineProps({
  12.   fileType: {
  13.     type: Number,
  14.   },
  15.   iconName: {
  16.     type: String,
  17.   },
  18.   cover: {
  19.     type: String,
  20.   },
  21.   width: {
  22.     type: Number,
  23.     default: 32,
  24.   },
  25.   fit: {
  26.     type: String,
  27.     default: "cover",
  28.   },
  29. });
  30.  
  31. const fileTypeMap = {
  32.   0: { desc: "目录", icon: "folder" },
  33.   1: { desc: "视频", icon: "video" },
  34.   2: { desc: "音频", icon: "music" },
  35.   3: { desc: "图片", icon: "image" },
  36.   4: { desc: "exe", icon: "pdf" },
  37.   5: { desc: "doc", icon: "word" },
  38.   6: { desc: "excel", icon: "excel" },
  39.   7: { desc: "纯文本", icon: "txt" },
  40.   8: { desc: "程序", icon: "code" },
  41.   9: { desc: "压缩包", icon: "zip" },
  42.   10: { desc: "其他文件", icon: "others" },
  43. };
  44.  
  45. const getImage = () => {
  46.   // 当上传的不是本地文件,而是服务器上转码之后的图片或者视频
  47.   if (props.cover) {
  48.     return proxy.globalInfo.imageUrl + props.cover;
  49.   }
  50.   let icon = "unknow_icon";
  51.   // 根据文件名判断图标
  52.   if (props.iconName) {
  53.     icon = props.iconName;
  54.   } else {
  55.     // 根据文件类型判断图标
  56.     const iconMap = fileTypeMap[props.fileType];
  57.     if (iconMap != undefined) {
  58.       icon = iconMap["icon"];
  59.     }
  60.   }
  61.   return new URL(`/src/assets/icon-image/${icon}.png`, import.meta.url).href;
  62. };
  63. </script>
  64.  
  65. <style lang="scss" scoped>
  66. .icon {
  67.   text-align: center;
  68.   display: inline-block;
  69.   border-radius: 3px;
  70.   overflow: hidden;
  71.   img {
  72.     width: 100%;
  73.     height: 100%;
  74.   }
  75. }
  76. </style>

3.main.js引入全局组件

  1.  
  2. import Table from '@/components/Table.vue'
  3. import Icon from '@/components/Icon.vue'
  4.  
  5.  
  6. app.component("Table",Table)
  7. app.component("Icon",Icon)

4.封装文件列表样式组件file.list.scss

包括头部top,文件列表样式file-list,没有数据样式no-data

src/assets/file.list.scss

  1. .top {
  2.     margin-top: 20px;
  3.     .top-op {
  4.         display: flex;
  5.         align-items: center;
  6.         .btn {
  7.             margin-right: 10px;
  8.         }
  9.         .search-panel {
  10.             margin-left: 10px;
  11.             width: 300px;
  12.         }
  13.         .icon-refresh {
  14.             cursor: pointer;
  15.             margin-left: 10px;
  16.         }
  17.         .not-allow {
  18.             background: #d2d2d2 !important;
  19.             cursor: not-allowed;
  20.         }
  21.     }
  22. }
  23.  
  24. .file-list {
  25.     .file-item {
  26.         display: flex;
  27.         align-items: center;
  28.         padding: 6px 0px;
  29.         .file-name {
  30.             margin-left: 8px;
  31.             flex: 1;
  32.             width: 0;
  33.             overflow: hidden;
  34.             // 当对象内文本溢出时显示省略标记(...)
  35.             text-overflow: ellipsis;
  36.             // 不换行 强行文本在同一行显示
  37.             white-space: nowrap;
  38.             span {
  39.                 cursor: pointer;
  40.                 &:hover {
  41.                     color: #06a7ff;
  42.                 }
  43.             }
  44.             .transfer-status {
  45.                 font-size: 13px;
  46.                 margin-left: 10px;
  47.                 color: #e6a23c;
  48.             }
  49.             .transfer-fail {
  50.                 color: #f75000;
  51.             }
  52.         }
  53.         .edit-panel {
  54.             flex: 1;
  55.             width: 0;
  56.             display: flex;
  57.             align-items: center;
  58.             margin: 0px 5px;
  59.             .iconfont {
  60.                 margin-left: 10px;
  61.                 background: #0c95f7;
  62.                 color: #fff;
  63.                 padding: 3px 5px;
  64.                 border-radius: 5px;
  65.                 cursor: pointer;
  66.             }
  67.             .not-allow {
  68.                 cursor: not-allowed;
  69.                 background: #7cb1d7;
  70.                 color: #ddd;
  71.                 text-decoration: none;
  72.             }
  73.         }
  74.         .op {
  75.             width: 280px;
  76.             margin-left: 15px;
  77.             .iconfont {
  78.                 font-size: 13px;
  79.                 margin-left: 5px;
  80.                 color: #06a7ff;
  81.                 cursor: pointer;
  82.             }
  83.             .iconfont::before {
  84.                 margin-right: 1px;
  85.             }
  86.         }
  87.     }
  88. }
  89.  
  90. // justify-content 设置主轴上的子元素排列方式
  91. // align-content 设置侧轴上的子元素的排列方式（多行）
  92. .no-data {
  93.     // vh就是当前屏幕可见高度的1%
  94.     // height:100vh == height:100%;
  95.     // calc(100vh - 150px)表示整个浏览器窗口高度减去150px的大小
  96.     height: calc(100vh - 150px);
  97.     display: flex;
  98.     // align-items 设置侧轴上的子元素的排列方式（单行）
  99.     align-items: center;
  100.     // 设置主轴上的子元素排列方式
  101.     justify-content: center;
  102.     .no-data-inner {
  103.         text-align: center;
  104.         .tips {
  105.             margin-top: 10px;
  106.         }
  107.         .op-list {
  108.             margin-top: 20px;
  109.             display: flex;
  110.             justify-content: center;
  111.             align-items: center;
  112.             .op-item {
  113.                 cursor: pointer;
  114.                 width: 100px;
  115.                 height: 100px;
  116.                 margin: 0px 10px;
  117.                 padding: 5px 0px;
  118.                 background: rgb(241, 241, 241);
  119.             }
  120.         }
  121.     }
  122. }

src/views/main/Main.vue引入

@import "@/assets/file.list.scss"


5.文件列表搭建

完整版Main.vue

src/views/main/Main.vue

  1. <template>
  2.   <div>
  3.     <div class="top">
  4.       <!-- 头部按钮处 -->
  5.       <div class="top-op">
  6.         <div class="btn">
  7.           <!-- show-file-list	是否显示已上传文件列表 -->
  8.           <!-- with-credentials	支持发送 cookie 凭证信息 -->
  9.           <!-- multiple	是否支持多选文件 -->
  10.           <!-- http-request	覆盖默认的 Xhr 行为，允许自行实现上传文件的请求 -->
  11.           <!-- accept	接受上传的文件类型 -->
  12.           <el-upload
  13.             :show-file-list="false"
  14.             :with-credentials="true"
  15.             :multiple="true"
  16.             :http-request="addFile"
  17.             :accept="fileAccept"
  18.           >
  19.             <el-button type="primary">
  20.               <span class="iconfont icon-upload"></span>
  21.               &nbsp上传
  22.             </el-button>
  23.           </el-upload>
  24.         </div>
  25.         <el-button type="success" @click="newFolder" v-if="category == 'all'">
  26.           <span class="iconfont icon-folder-add"></span>
  27.           &nbsp新建文件夹
  28.         </el-button>
  29.         <el-button
  30.           @click="delFileBatch"
  31.           type="danger"
  32.           :disabled="selectFileIdList.length == 0"
  33.         >
  34.           <span class="iconfont icon-del"></span>
  35.           &nbsp批量删除
  36.         </el-button>
  37.         <el-button
  38.           @click="moveFolderBatch"
  39.           type="warning"
  40.           :disabled="selectFileIdList.length == 0"
  41.         >
  42.           <span class="iconfont icon-move"></span>
  43.           &nbsp批量移动
  44.         </el-button>
  45.         <div class="search-panel">
  46.           <el-input
  47.             clearable
  48.             placeholder="请输入文件名搜索"
  49.             v-model="fileNameFuzzy"
  50.             @keyup.enter="search"
  51.           >
  52.             <template #suffix>
  53.               <i class="iconfont icon-search" @click="search"></i>
  54.             </template>
  55.           </el-input>
  56.         </div>
  57.         <div class="iconfont icon-refresh" @click="loadDataList"></div>
  58.       </div>
  59.       <!-- 导航 -->
  60.       <Navigation ref="navigationRef" @navChange="navChange"></Navigation>
  61.     </div>
  62.  
  63.     <!-- 文件列表 -->
  64.     <div class="file-list" v-if="tableData.list && tableData.list.length > 0">
  65.       <Table
  66.         ref="dataTableRef"
  67.         :columns="columns"
  68.         :showPagination="true"
  69.         :dataSource="tableData"
  70.         :fetch="loadDataList"
  71.         :initFetch="false"
  72.         :options="tableOptions"
  73.         @rowSelected="rowSelected"
  74.       >
  75.         <!-- 文件名 -->
  76.         <template #fileName="{ index, row }">
  77.           <!-- showOp(row) 当鼠标放在当前行时,分享下载等图标出现 -->
  78.           <!-- cancelShowOp(row) 当鼠标离开当前行时,分享下载等图标消失 -->
  79.           <div
  80.             class="file-item"
  81.             @mouseenter="showOp(row)"
  82.             @mouseleave="cancelShowOp(row)"
  83.           >
  84.             <!-- 显示文件图标 -->
  85.             <template
  86.               v-if="(row.fileType == 3 || row.fileType == 1) && row.status == 2"
  87.             >
  88.               <!-- 如果文件类型是图片或者视频,且已经成功转码,则执行 Icon中的cover -->
  89.               <Icon :cover="row.fileCover" :width="32"></Icon>
  90.             </template>
  91.             <template v-else>
  92.               <!-- 如果文件夹类型是文件,则文件类型是该文件类型 -->
  93.               <Icon v-if="row.folderType == 0" :fileType="row.fileType"></Icon>
  94.               <!-- 如果文件夹类型是目录,则文件类型就是目录0 -->
  95.               <Icon v-if="row.folderType == 1" :fileType="0"></Icon>
  96.             </template>
  97.  
  98.             <!-- 显示文件名称 -->
  99.             <!-- v-if="!row.showEdit" 如果该行文件没有编辑 -->
  100.             <span class="file-name" v-if="!row.showEdit" :title="row.fileName">
  101.               <span @click="preview(row)">{{ row.fileName }}</span>
  102.               <span v-if="row.status == 0" class="transfer-status">转码中</span>
  103.               <span v-if="row.status == 1" class="transfer-status transfer-fail"
  104.                 >转码失败</span
  105.               >
  106.             </span>
  107.  
  108.             <!-- 点击新建文件夹时显示行 -->
  109.             <div class="edit-panel" v-if="row.showEdit">
  110.               <el-input
  111.                 v-model.trim="row.fileNameReal"
  112.                 ref="editNameRef"
  113.                 :maxLength="190"
  114.                 @keyup.enter="saveNameEdit(index)"
  115.               >
  116.                 <template #suffix>{{ row.fileSuffix }}</template>
  117.               </el-input>
  118.  
  119.               <!-- 对号 确定 -->
  120.               <span
  121.                 :class="[
  122.                   'iconfont icon-right1',
  123.                   row.fileNameReal ? '' : 'not-allow',
  124.                 ]"
  125.                 @click="saveNameEdit(index)"
  126.               ></span>
  127.  
  128.               <!-- 叉号 取消 -->
  129.               <span
  130.                 class="iconfont icon-error"
  131.                 @click="cancelNameEdit(index)"
  132.               ></span>
  133.             </div>
  134.  
  135.             <!-- 当鼠标放在当前行时显示 -->
  136.             <span class="op">
  137.               <template v-if="row.showOp && row.fileId && row.status == 2">
  138.                 <span class="iconfont icon-share1" @click="share(row)">
  139.                   分享
  140.                 </span>
  141.                 <!-- 只有当是文件夹时才可下载 -->
  142.                 <span
  143.                   class="iconfont icon-download"
  144.                   v-if="row.folderType == 0"
  145.                   @click="download(row)"
  146.                 >
  147.                   下载
  148.                 </span>
  149.                 <span class="iconfont icon-del" @click="delFile(row)">
  150.                   删除
  151.                 </span>
  152.                 <span class="iconfont icon-edit" @click="editFileName(index)">
  153.                   重命名
  154.                 </span>
  155.                 <span class="iconfont icon-move" @click="moveFolder(row)">
  156.                   移动
  157.                 </span>
  158.               </template>
  159.             </span>
  160.           </div>
  161.         </template>
  162.  
  163.         <!-- 文件大小 -->
  164.         <template #fileSize="{ index, row }">
  165.           <span v-if="row.fileSize">
  166.             {{ proxy.Utils.size2Str(row.fileSize) }}</span
  167.           >
  168.         </template>
  169.       </Table>
  170.     </div>
  171.     
  172.     <div class="no-data" v-else>
  173.       <div class="no-data-inner">
  174.         <Icon iconName="no_data" :width="120" fit="fill"></Icon>
  175.         <div class="tips">当前目录为空，上传你的第一个文件吧</div>
  176.         <div class="op-list">
  177.           <el-upload
  178.             :show-file-list="false"
  179.             :with-credentials="true"
  180.             :multiple="true"
  181.             :http-request="addFile"
  182.             :accept="fileAccept"
  183.           >
  184.             <div class="op-item">
  185.               <Icon iconName="file" :width="60"></Icon>
  186.               <div>上传文件</div>
  187.             </div>
  188.           </el-upload>
  189.           <div class="op-item" v-if="category == 'all'" @click="newFolder">
  190.             <Icon iconName="folder" :width="60"></Icon>
  191.             <div>新建目录</div>
  192.           </div>
  193.         </div>
  194.       </div>
  195.     </div>
  196.     <FolderSelect
  197.       ref="folderSelectRef"
  198.       @folderSelect="moveFolderDone"
  199.     ></FolderSelect>
  200.  
  201.     <!-- 预览 -->
  202.     <Preview ref="previewRef"></Preview>
  203.  
  204.     <!-- 分享 -->
  205.     <ShareFile ref="shareRef"></ShareFile>
  206.   </div>
  207. </template>
  208.  
  209. <script setup>
  210. import CategoryInfo from "@/js/CategoryInfo.js";
  211. import ShareFile from "./ShareFile.vue";
  212.  
  213. import { ref, reactive, getCurrentInstance, nextTick, computed } from "vue";
  214. import { useRouter, useRoute } from "vue-router";
  215. const { proxy } = getCurrentInstance();
  216. const router = useRouter();
  217. const route = useRoute();
  218.  
  219. // 实现上传文件的请求
  220. // 将Main子组件页面的数据传递给Framwork父组件
  221. const emit = defineEmits(["addFile"]);
  222. const addFile = async (fileData) => {
  223.   emit("addFile", { file: fileData.file, filePid: currentFolder.value.fileId });
  224. };
  225.  
  226. // 添加文件回调
  227. const reload = () => {
  228.   showLoading.value = false;
  229.   loadDataList();
  230. };
  231. defineExpose({ reload });
  232.  
  233. const api = {
  234.   loadDataList: "/file/loadDataList",
  235.   rename: "/file/rename",
  236.   newFoloder: "/file/newFoloder",
  237.   getFolderInfo: "/file/getFolderInfo",
  238.   delFile: "/file/delFile",
  239.   changeFileFolder: "/file/changeFileFolder",
  240.   createDownloadUrl: "/file/createDownloadUrl",
  241.   download: "/api/file/download",
  242. };
  243.  
  244. // 实现文件选择
  245. const fileAccept = computed(() => {
  246.   const categoryItem = CategoryInfo[category.value];
  247.   return categoryItem ? categoryItem.accept : "*";
  248. });
  249.  
  250. // 列表头信息
  251. const columns = [
  252.   {
  253.     label: "文件名",
  254.     prop: "fileName",
  255.     scopedSlots: "fileName",
  256.   },
  257.   {
  258.     label: "修改时间",
  259.     prop: "lastUpdateTime",
  260.     width: 200,
  261.   },
  262.   {
  263.     label: "文件大小",
  264.     prop: "fileSize",
  265.     scopedSlots: "fileSize",
  266.     width: 200,
  267.   },
  268. ];
  269.  
  270. // 搜索功能
  271. const search = () => {
  272.   showLoading.value = true;
  273.   loadDataList();
  274. };
  275.  
  276. // 数据源
  277. const tableData = ref({});
  278. // 表格选项
  279. const tableOptions = {
  280.   extHeight: 50,
  281.   selectType: "checkbox",
  282. };
  283. // 文件名
  284. const fileNameFuzzy = ref();
  285.  
  286. const showLoading = ref(true);
  287. // 分类
  288. const category = ref();
  289. // 当前文件夹
  290. const currentFolder = ref({ fileId: 0 });
  291.  
  292. // 获得数据;
  293. const loadDataList = async () => {
  294.   let params = {
  295.     // 页码
  296.     pageNo: tableData.value.pageNo,
  297.     // 分页大小
  298.     pageSize: tableData.value.pageSize,
  299.     // 文件名（模糊）
  300.     fileNameFuzzy: fileNameFuzzy.value,
  301.     // 分类
  302.     category: category.value,
  303.     // 文件父id
  304.     filePid: currentFolder.value.fileId,
  305.   };
  306.   if (params.category !== "all") {
  307.     delete params.filePid;
  308.   }
  309.   let result = await proxy.Request({
  310.     url: api.loadDataList,
  311.     showLoading: showLoading,
  312.     params,
  313.   });
  314.   if (!result) {
  315.     return;
  316.   }
  317.   tableData.value = result.data;
  318.   editing.value = false;
  319. };
  320.  
  321. // 当鼠标放在当前行时,分享下载等图标出现
  322. const showOp = (row) => {
  323.   // 关闭所有的显示
  324.   tableData.value.list.forEach((element) => {
  325.     element.showOp = false;
  326.   });
  327.   // 只开启当前显示
  328.   row.showOp = true;
  329. };
  330.  
  331. const cancelShowOp = (row) => {
  332.   row.showOp = false;
  333. };
  334.  
  335. // 编辑行(新建文件夹时编辑行)
  336. // 当前编辑行状态
  337. const editing = ref(false);
  338. // 新建文件夹行内填充的内容绑定
  339. const editNameRef = ref();
  340.  
  341. // 新建文件夹
  342. const newFolder = () => {
  343.   // 如果当前编辑行存在,则再次点击新建文件夹按钮时不起作用
  344.   if (editing.value) {
  345.     return;
  346.   }
  347.   // 让其他行都不允许编辑
  348.   tableData.value.list.forEach((element) => {
  349.     element.showEdit = false;
  350.   });
  351.   editing.value = true;
  352.   tableData.value.list.unshift({
  353.     showEdit: true,
  354.     fileType: 0,
  355.     fileId: "",
  356.     filePid: currentFolder.value.fileId,
  357.   });
  358.   nextTick(() => {
  359.     editNameRef.value.focus();
  360.   });
  361. };
  362.  
  363. // 取消新建文件夹操作
  364. const cancelNameEdit = (index) => {
  365.   const fileData = tableData.value.list[index];
  366.   // 如果存在这个文件的话,说明此处是重命名操作,那么可以直接将编辑行关闭
  367.   if (fileData.fileId) {
  368.     fileData.showEdit = false;
  369.   } else {
  370.     // 如果不存在的话,那么直接将此行删除
  371.     tableData.value.list.splice(index, 1);
  372.   }
  373.   // 当前编辑行状态为:未编辑
  374.   editing.value = false;
  375. };
  376.  
  377. // 确定新建文件夹操作
  378. const saveNameEdit = async (index) => {
  379.   const { fileId, filePid, fileNameReal } = tableData.value.list[index];
  380.   if (fileNameReal == "" || fileNameReal.indexOf("/") != -1) {
  381.     proxy.Message.warning("文件名不能为空且不能含有斜杠");
  382.     return;
  383.   }
  384.   // 重命名
  385.   let url = api.rename;
  386.   if (fileId == "") {
  387.     // 当文件ID不存在时,新建目录
  388.     url = api.newFoloder;
  389.   }
  390.   let result = await proxy.Request({
  391.     url: url,
  392.     params: {
  393.       fileId,
  394.       filePid: filePid,
  395.       fileName: fileNameReal,
  396.     },
  397.   });
  398.   if (!result) {
  399.     return;
  400.   }
  401.   tableData.value.list[index] = result.data;
  402.   editing.value = false;
  403. };
  404.  
  405. // 重命名 编辑文件名
  406. const editFileName = (index) => {
  407.   // 如果现在有新建文件夹的编辑行,那么先将其删除,并且将序号减一
  408.   if (tableData.value.list[0].fileId == "") {
  409.     tableData.value.list.splice(0, 1);
  410.     index = index - 1;
  411.   }
  412.   tableData.value.list.forEach((element) => {
  413.     element.showEdit = false;
  414.   });
  415.   let cureentData = tableData.value.list[index];
  416.   cureentData.showEdit = true;
  417.  
  418.   //编辑文件
  419.   if (cureentData.folderType == 0) {
  420.     cureentData.fileNameReal = cureentData.fileName.substring(
  421.       0,
  422.       cureentData.fileName.indexOf(".")
  423.     );
  424.     cureentData.fileSuffix = cureentData.fileName.substring(
  425.       cureentData.fileName.indexOf(".")
  426.     );
  427.   } else {
  428.     cureentData.fileNameReal = cureentData.fileName;
  429.     cureentData.fileSuffix = "";
  430.   }
  431.  
  432.   // 当前编辑行状态为true
  433.   editing.value = true;
  434.   nextTick(() => {
  435.     editNameRef.value.focus();
  436.   });
  437. };
  438.  
  439. // 行选中
  440. // 多选 批量选中
  441. const selectFileIdList = ref([]);
  442. const rowSelected = (rows) => {
  443.   selectFileIdList.value = [];
  444.   rows.forEach((item) => {
  445.     selectFileIdList.value.push(item.fileId);
  446.   });
  447. };
  448.  
  449. // 删除单个文件
  450. const delFile = (row) => {
  451.   proxy.Confirm(
  452.     `你确定要删除【$row.fileName】吗？删除的文件可在 10 天内通过回收站还原`,
  453.     async () => {
  454.       let result = await proxy.Request({
  455.         url: api.delFile,
  456.         params: {
  457.           fileIds: row.fileId,
  458.         },
  459.       });
  460.       if (!result) {
  461.         return;
  462.       }
  463.       // 重新获取数据
  464.       loadDataList();
  465.     }
  466.   );
  467. };
  468.  
  469. // 批量删除文件
  470. const delFileBatch = () => {
  471.   if (selectFileIdList.value.length == 0) {
  472.     return;
  473.   }
  474.   proxy.Confirm(
  475.     `你确定要删除这些文件吗？删除的文件可在 10 天内通过回收站还原`,
  476.     async () => {
  477.       let result = await proxy.Request({
  478.         url: api.delFile,
  479.         params: {
  480.           fileIds: selectFileIdList.value.join(","),
  481.         },
  482.       });
  483.       if (!result) {
  484.         return;
  485.       }
  486.       // 重新获取数据
  487.       loadDataList();
  488.     }
  489.   );
  490. };
  491.  
  492. // 移动目录
  493. const folderSelectRef = ref();
  494. // 当前要移动的文件（单个文件）
  495. const currentMoveFile = ref({});
  496.  
  497. // 移动单个文件
  498. const moveFolder = (data) => {
  499.   currentMoveFile.value = data;
  500.   folderSelectRef.value.showFolderDialog(currentFolder.value.fileId);
  501. };
  502.  
  503. // 移动批量文件
  504. const moveFolderBatch = () => {
  505.   currentMoveFile.value = {};
  506.   folderSelectRef.value.showFolderDialog(currentFolder.value.fileId);
  507. };
  508.  
  509. // 移动文件操作
  510. const moveFolderDone = async (folderId) => {
  511.   // 如果要移动到当前目录，提醒无需移动
  512.   if (
  513.     currentMoveFile.value.filePid == folderId ||
  514.     currentFolder.value.fileId == folderId
  515.   ) {
  516.     proxy.Message.warning("文件正在当前目录，无需移动");
  517.     return;
  518.   }
  519.   let filedIdsArray = [];
  520.   // 如果是单个文件移动
  521.   if (currentMoveFile.value.fileId) {
  522.     filedIdsArray.push(currentMoveFile.value.fileId);
  523.   } else {
  524.     // 如果是多个文件移动
  525.     // concat 连接多个数组
  526.     // selectFileIdList 是指批量选择时选择的文件ID
  527.     filedIdsArray = filedIdsArray.concat(selectFileIdList.value);
  528.   }
  529.   let result = await proxy.Request({
  530.     url: api.changeFileFolder,
  531.     params: {
  532.       fileIds: filedIdsArray.join(","),
  533.       filePid: folderId,
  534.     },
  535.   });
  536.   if (!result) {
  537.     return;
  538.   }
  539.   // 调用子组件暴露的close方法，实现当前弹出框页面的关闭
  540.   folderSelectRef.value.close();
  541.   // 更新当前文件列表
  542.   loadDataList();
  543. };
  544.  
  545. // 绑定导航栏
  546. const navigationRef = ref();
  547.  
  548. // 预览
  549. const previewRef = ref();
  550. const preview = (data) => {
  551.   // 如果是目录(文件夹)
  552.   if (data.folderType == 1) {
  553.     navigationRef.value.openFolder(data);
  554.     return;
  555.   }
  556.   if (data.status != 2) {
  557.     proxy.Message.warning("文件未完成转码,无法预览");
  558.     return;
  559.   }
  560.   previewRef.value.showPreview(data, 0);
  561. };
  562.  
  563. // 目录
  564. const navChange = (data) => {
  565.   const { curFolder, categoryId } = data;
  566.   currentFolder.value = curFolder;
  567.   showLoading.value = true;
  568.   category.value = categoryId;
  569.   loadDataList();
  570. };
  571.  
  572. // 下载文件
  573. const download = async (row) => {
  574.   let result = await proxy.Request({
  575.     url: api.createDownloadUrl + "/" + row.fileId,
  576.   });
  577.  
  578.   if (!result) {
  579.     return;
  580.   }
  581.  
  582.   window.location.href = api.download + "/" + result.data;
  583. };
  584.  
  585. // 分享文件
  586. // 利用ShareFile组件暴露出的show函数，实现将Main组件中的函数传递给ShareFile组件
  587. const shareRef = ref();
  588. const share = (row) => {
  589.   shareRef.value.show(row);
  590. };
  591. </script>
  592.  
  593. <style lang="scss" scoped>
  594. @import "@/assets/file.list.scss";
  595. </style>

二、功能实现

功能：新建目录，文件上传，分享，下载，删除，重命名，移动

1.将文件以字节为单位的转换为其他单位，封装组件


src/utils/Utils.js

  1. // 将文件以字节为单位的转换为其他单位
  2. export default {
  3.     size2Str: (limit) => {
  4.         var size = "";
  5.         if (limit < 0.1 * 1024) { //小于0.1KB，则转化成B
  6.             size = limit.toFixed(2) + "B"
  7.         } else if (limit < 0.1 * 1024 * 1024) { //小于0.1MB，则转化成KB
  8.             size = (limit / 1024).toFixed(2) + "KB"
  9.         } else if (limit < 0.1 * 1024 * 1024 * 1024) { //小于0.1GB，则转化成MB
  10.             size = (limit / (1024 * 1024)).toFixed(2) + "MB"
  11.         } else { //其他转化成GB
  12.             size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
  13.         }
  14.         var sizeStr = size + ""; //转成字符串
  15.         var index = sizeStr.indexOf("."); //获取小数点处的索引
  16.         var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
  17.         if (dou == "00") { //判断后两位是否为00，如果是则删除00               
  18.             return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
  19.         }
  20.         return size;
  21.     },
  22. }

main.js引入

  1.  
  2. import Utils from './utils/Utils'
  3.  
  4. app.config.globalProperties.Utils=Utils

2.新建目录功能

  1. <!-- 按钮2 -->
  2.                 <el-button type="success" @click="newFolder">
  3.                     <span class="iconfont icon-folder-add"></span>
  4.                     新建文件夹
  5.                 </el-button>

回调：

  1. // 编辑行(新建文件夹时编辑行)
  2. // 当前编辑行状态
  3. const editing = ref(false);
  4. // 新建文件夹行内填充的内容绑定
  5. const editNameRef = ref();
  6. // 新建文件夹
  7. const newFolder = () => {
  8.     // 如果当前编辑行存在,则再次点击新建文件夹按钮时不起作用
  9.     // 确保在编辑现有项目时，不能同时开始编辑新的项目。
  10.     if (editing.value) {
  11.         return;
  12.     }
  13.     // 让其他行都不允许编辑
  14.     tableData.value.list.forEach((element) => {
  15.         element.showEdit = false;
  16.     });
  17.     // 表示现在有一个项目正在被编辑
  18.     editing.value = true;
  19.     // 在列表顶部添加新文件夹:
  20.     tableData.value.list.unshift({
  21.         showEdit: true,
  22.         fileType: 0,
  23.         fileId: "",
  24.         filePid: currentFolder.value.fileId,// 父文件夹的ID
  25.     });
  26.     // 在下一个“tick”中将焦点设置到某个输入框:
  27.     nextTick(() => {
  28.         editNameRef.value.focus();
  29.     });
  30. };
  31. // 取消新建文件夹操作
  32. const cancelNameEdit = (index) => {
  33.     const fileData = tableData.value.list[index];
  34.     // 如果存在这个文件的话,说明此处是重命名操作,那么可以直接将编辑行关闭
  35.     if (fileData.fileId) {
  36.         fileData.showEdit = false;
  37.     } else {
  38.         // 如果不存在的话,那么直接将此行删除
  39.         // 删除位于 index 位置的一个项目。删除后，数组的长度将减少1，并且所有高于 index 的元素都会向下移动一个位置。
  40.         tableData.value.list.splice(index, 1);
  41.     }
  42.     // 当前编辑行状态为:未编辑
  43.     editing.value = false;
  44. };
  45. // 确定新建文件夹操作
  46. const saveNameEdit = async (index) => {
  47.     // 使用解构赋值从tableData.value.list数组中的指定索引位置获取fileId、filePid和fileNameReal。
  48.     const { fileId, filePid, fileNameReal } = tableData.value.list[index];
  49.     // 如果文件名fileNameReal为空或包含斜杠（/），则显示警告并退出函数。
  50.     if (fileNameReal == "" || fileNameReal.indexOf("/") != -1) {
  51.         proxy.Message.warning("文件名不能为空且不能含有斜杠");
  52.         return;
  53.     }
  54.     // 如果fileId为空，表示这是新建目录而不是重命名，所以将请求的URL设置为api.newFoloder；否则，使用默认的api.rename来重命名现有文件或文件夹。
  55.     // 重命名
  56.     let url = api.rename;
  57.     if (fileId == "") {
  58.         // 当文件ID不存在时,新建目录
  59.         url = api.newFoloder;
  60.     }
  61.     // 使用proxy.Request发送一个异步请求，该请求包含URL和要传递的参数（如fileId、filePid和fileName）。这里假设proxy.Request是一个返回Promise的函数，用于发送HTTP请求。
  62.     let result = await proxy.Request({
  63.         url: url,
  64.         params: {
  65.             fileId,
  66.             filePid: filePid,
  67.             fileName: fileNameReal,
  68.         },
  69.     });
  70.     // 如果请求没有成功（例如，返回null或undefined），则直接退出函数。
  71.     if (!result) {
  72.         return;
  73.     }
  74.     // 如果请求成功，使用响应中的数据更新tableData.value.list数组中的相应项。
  75.     tableData.value.list[index] = result.data;
  76.     // 关闭编辑状态
  77.     editing.value = false;
  78. };

3.文件重命名

  1.  
  2. <span class="iconfont icon-edit" @click="editFileName(index)">
  3. 重命名 
  4. </span>

回调：

  1. // 重命名 编辑文件名
  2. const editFileName = (index) => {
  3.     // 如果现在有新建文件夹的编辑行
  4.     if (tableData.value.list[0].fileId == "") {
  5.         // 那么先将其删除
  6.         tableData.value.list.splice(0, 1);
  7.         // 并且将序号减一,否则重命名会出错顺序
  8.         index = index - 1;
  9.     }
  10.     tableData.value.list.forEach((element) => {
  11.         // 默认情况下所有行都不显示编辑状态。
  12.         element.showEdit = false;
  13.     });
  14.     // 获取要编辑的行的数据（根据传入的index）
  15.     let cureentData = tableData.value.list[index];
  16.     // 表示该行现在处于编辑状态
  17.     cureentData.showEdit = true;
  18.  
  19.     //编辑文件
  20.     if (cureentData.folderType == 0) {
  21.         // 如果folderType为0，表示这是一个文件（或不是文件夹）
  22.         // 使用substring和indexOf方法从文件名中提取文件名（不带后缀）和文件后缀
  23.         cureentData.fileNameReal = cureentData.fileName.substring(
  24.             0,
  25.             cureentData.fileName.indexOf(".")
  26.         );
  27.         cureentData.fileSuffix = cureentData.fileName.substring(
  28.             cureentData.fileName.indexOf(".")
  29.         );
  30.         // 如果不是文件
  31.     } else {
  32.         // 直接将文件名赋给fileNameReal
  33.         cureentData.fileNameReal = cureentData.fileName;
  34.         // 没有后缀
  35.         cureentData.fileSuffix = "";
  36.     }
  37.  
  38.     // 当前编辑行状态为true
  39.     editing.value = true;
  40.     nextTick(() => {
  41.         editNameRef.value.focus();
  42.     });
  43. };

三、文件上传功能

（1）在子组件Main.vue里面定义，但是实际上传功能在Framework.vue中

  1. <el-upload :show-file-list="false" :with-credentials="true" :multiple="true" :http-request="addFile"
  2.                         :accept="fileAccept">
  3.                         <el-button type="primary">
  4.                             <span class="iconfont icon-upload"></span>
  5.                             上传
  6.                         </el-button>
  7.                     </el-upload>

（2）Main.vue中

上传按钮方法：:http-request="addFile"
回调：

  1. // 实现上传文件的请求
  2. // 定义了一个名为 addFile 的事件，该事件可以被外部（如父组件）监听。
  3. const emit = defineEmits(["addFile"]);
  4. // 它接收一个 fileData 参数，并使用之前定义的 emit 函数来触发一个 addFile 事件。事件传递的数据是一个对象，包含 file（从 fileData.file 获取）和 filePid（从 currentFolder.value.fileId 获取）。
  5. const addFile = async (fileData) => {
  6.     emit("addFile", { file: fileData.file, filePid: currentFolder.value.fileId });
  7. };
  8. // 当前文件夹
  9. // currentFolder 引用用于存储当前文件夹的 ID，这个 ID 可能会随着用户操作而改变
  10. const currentFolder = ref({ fileId: 0 });

（3）Framework.vue中

气泡框：v-model:visible="showUploader"

  1. <!-- v-slot="{ Component } 解构插槽 -->
  2.             <!-- 让router-view的插槽能够访问子组件中的数据 -->
  3.             <!-- 访问的数据就是Component -->
  4.                 <router-view v-slot="{ Component }">
  5.                     <component @addFile="addFile" ref="routerViewRef" :is="Component"></component>
  6.                 </router-view>

（4）回调

  1. // 控制是否展示上传区域
  2. const showUploader = ref(false);
  3. // 文件上传处数据绑定
  4. const uploaderRef = ref();
  5. // 上传文件
  6. const addFile = (data) => {
  7.     const { file, filePid } = data;
  8.     showUploader.value = true;
  9.     // 调用子组件 Uploader中暴露的 addFile函数,并将参数传递给子组件
  10.     uploaderRef.value.addFile(file, filePid);
  11. };

四、气泡框上传区域定义组件Uploader（重点）

（1）src/views/main/Uploader.vue

框架搭建：

1.上传标题
2.上传文件列表：文件名，文件上传进度条，文件上传状态（图标+描述+大小展示），操作按钮（不同情境），判断是否有上传文件（记得引入NoData图标组件）。

  1. <template>
  2.   <div class="uploader-panel">
  3.     <!-- 上传标题 -->
  4.     <div class="uploader-title">
  5.       <span>上传任务</span>
  6.       <span class="tips">（仅展示本次上传任务）</span>
  7.     </div>
  8.     <!-- 上传列表 -->
  9.     <div class="file-list">
  10.       <!-- 遍历上传的每一项 -->
  11.       <div v-for="(item, index) in fileList" class="file-item">
  12.         <!-- 上传的每一项 -->
  13.         <div class="upload-panel">
  14.           <!-- 文件名 -->
  15.           <div class="file-name">{{ item.fileName }}</div>
  16.           <!-- 上传进度条 -->
  17.           <div class="progress">
  18.             <!-- 当状态为 上传中/上传完成/秒传时显示 -->
  19.             <!-- Element UI 的进度条组件,percentage 属性（进度条的百分比）绑定到 item.uploadProgress 这个数据上。 -->
  20.             <el-progress :percentage="item.uploadProgress" v-if="item.status == STATUS.uploading.value ||
  21.               item.status == STATUS.upload_seconds.value ||
  22.               item.status == STATUS.upload_finish.value
  23.               "></el-progress>
  24.           </div>
  25.           <!-- 下方上传状态:图标+描述 -->
  26.           <div class="upload-status">
  27.             <!-- 图标：✔/✖ -->
  28.             <!-- 一个静态的 'iconfont' 和一个根据 item.status 从 STATUS 对象中获取的图标类名。 -->
  29.             <span :class="['iconfont', 'icon-' + STATUS[item.status].icon]"
  30.               :style="{ color: STATUS[item.status].color }">
  31.             </span>
  32.             <!-- 状态描述：上传中/上传完成/秒传/失败 -->
  33.             <span
  34.                 class="status"
  35.                 :style="{ color: STATUS[item.status].color }"
  36.                 >{{
  37.                   item.status == "fail" ? item.errorMsg : STATUS[item.status].desc
  38.                 }}
  39.             </span>
  40.             <!-- 上传中的大小显示,传了多少，速度 -->
  41.             <!-- v-if表示只会在文件上传过程中显示,123kb/200mb -->
  42.             <span
  43.               class="upload-info"
  44.               v-if="item.status == STATUS.uploading.value">
  45.               {{ proxy.Utils.size2Str(item.uploadSize) }}/{{
  46.                 proxy.Utils.size2Str(item.totalSize)
  47.               }}
  48.             </span>
  49.           </div>
  50.         </div>
  51.         <!-- 后面的操作按钮 -->
  52.         <div class="op">
  53.           <!-- 显示 MD5解析 信息 -->
  54.           <!-- 解析中，圆形进度条，只在文件或数据的初始化阶段显示，而不是在整个上传过程中 -->
  55.           <el-progress
  56.             type="circle"
  57.             :width="50"
  58.             :percentage="item.md5Progress"
  59.             v-if="item.status == STATUS.init.value"
  60.           ></el-progress>
  61.           <!-- 按钮 -->
  62.           <div class="op-btn">
  63.             <!-- 如果是上传中,提供暂停和上传两个按钮 -->
  64.             <span v-if="item.status == STATUS.uploading.value">
  65.               <!-- 上传按钮 -->
  66.               <Icon
  67.                 :width="28"
  68.                 class="btn-item"
  69.                 iconName="upload"
  70.                 v-if="item.pause"
  71.                 title="上传"
  72.                 @click="startUpload(item.uid)"
  73.               ></Icon>
  74.               <!-- 暂停按钮 -->
  75.               <Icon
  76.                 :width="28"
  77.                 class="btn-item"
  78.                 iconName="pause"
  79.                 title="暂停"
  80.                 @click="pauseUpload(item.uid)"
  81.                 v-else
  82.               ></Icon>
  83.             </span>
  84.             <!-- 在上传过程中，不是解析&上传完成&秒传的情况下,提供删除按钮（不想传了） -->
  85.             <Icon
  86.               :width="28"
  87.               class="del btn-item"
  88.               iconName="del"
  89.               title="删除"
  90.               v-if="item.status != STATUS.init.value &&
  91.                 item.status != STATUS.upload_finish.value &&
  92.                 item.status != STATUS.upload_seconds.value
  93.                 "
  94.               @click="delUpload(item.uid, index)"
  95.             ></Icon>
  96.             <!-- 在是上传完成/秒传的情况下,提供清除按钮 -->
  97.             <Icon
  98.               :width="28"
  99.               class="clean btn-item"
  100.               iconName="clean"
  101.               title="清除"
  102.               v-if="item.status == STATUS.upload_finish.value ||
  103.                 item.status == STATUS.upload_seconds.value
  104.                 "
  105.               @click="delUpload(item.uid, index)"
  106.             ></Icon>
  107.           </div>
  108.         </div>
  109.       </div>
  110.       <!-- 当没有文件上传时的显示 -->
  111.       <div v-if="fileList.length == 0">
  112.         <NoData msg="暂无上传任务"></NoData>
  113.       </div>
  114.     </div>
  115.   </div>
  116. </template>
  117. ......
  118. <style lang="scss" scoped>
  119. .uploader-panel {
  120.   .uploader-title {
  121.     border-bottom: 1px solid #ddd;
  122.     line-height: 40px;
  123.     padding: 0px 10px;
  124.     font-size: 15px;
  125.  
  126.     .tips {
  127.       font-size: 13px;
  128.       color: rgb(169, 169, 169);
  129.     }
  130.   }
  131.  
  132.   .file-list {
  133.     // 如果内容溢出，则浏览器提供滚动条。
  134.     overflow: auto;
  135.     padding: 10px 0px;
  136.     min-height: calc(100vh / 2);
  137.     max-height: calc(100vh - 120px);
  138.  
  139.     .file-item {
  140.       position: relative;
  141.       display: flex;
  142.       justify-content: center;
  143.       align-items: center;
  144.       padding: 3px 10px;
  145.       background-color: #fff;
  146.       border-bottom: 1px solid #ddd;
  147.     }
  148.  
  149.     .file-item:nth-child(even) {
  150.       background-color: #fcf8f4;
  151.     }
  152.  
  153.     .upload-panel {
  154.       flex: 1;
  155.  
  156.       .file-name {
  157.         color: rgb(64, 62, 62);
  158.       }
  159.  
  160.       .upload-status {
  161.         display: flex;
  162.         align-items: center;
  163.         margin-top: 5px;
  164.  
  165.         .iconfont {
  166.           margin-right: 3px;
  167.         }
  168.  
  169.         .status {
  170.           color: red;
  171.           font-size: 13px;
  172.         }
  173.  
  174.         .upload-info {
  175.           margin-left: 5px;
  176.           font-size: 12px;
  177.           color: rgb(112, 111, 111);
  178.         }
  179.       }
  180.  
  181.       .progress {
  182.         height: 10px;
  183.       }
  184.     }
  185.  
  186.     .op {
  187.       width: 100px;
  188.       display: flex;
  189.       align-items: center;
  190.       justify-content: flex-end;
  191.  
  192.       .op-btn {
  193.         .btn-item {
  194.           cursor: pointer;
  195.         }
  196.  
  197.         .del,
  198.         .clean {
  199.           margin-left: 5px;
  200.         }
  201.       }
  202.     }
  203.   }
  204. }</style>

功能实现：

定义上传状态STATUS,
定义addFile暴露给父组件 FrameWork,方便其调用该方法defineExpose({ addFile });，
接收一个参数 uid 并返回一个与给定 uid 匹配的文件对象（如果存在的话)
计算MD5值computeMD5，
上传文件uploadFile ,

根据文件Id获取到文件getFileUid.

（下面的代码会有详细注释）

 

  1. <script setup>
  2. import {
  3.   getCurrentInstance,
  4.   onMounted,
  5.   reactive,
  6.   ref,
  7.   watch,
  8.   nextTick,
  9. } from "vue";
  10. import SparkMD5 from "spark-md5";
  11. const { proxy } = getCurrentInstance();
  12.  
  13. const api = {
  14.   upload: "/file/uploadFile",
  15. };
  16.  
  17. // 定义不同的上传状态
  18. const STATUS = {
  19.   emptyfile: {
  20.     value: "emptyfile",
  21.     desc: "文件为空",
  22.     color: "#F75000",
  23.     icon: "close",
  24.   },
  25.   fail: {
  26.     value: "fail",
  27.     desc: "上传失败",
  28.     color: "#F75000",
  29.     icon: "close",
  30.   },
  31.   init: {
  32.     value: "init",
  33.     desc: "解析中",
  34.     color: "#e6a23c",
  35.     icon: "clock",
  36.   },
  37.   uploading: {
  38.     value: "uploading",
  39.     desc: "上传中",
  40.     color: "#409eff",
  41.     icon: "upload",
  42.   },
  43.   upload_finish: {
  44.     value: "upload_finish",
  45.     desc: "上传完成",
  46.     color: "#67c23a",
  47.     icon: "ok",
  48.   },
  49.   upload_seconds: {
  50.     value: "upload_seconds",
  51.     desc: "秒传",
  52.     color: "#67c23a",
  53.     icon: "ok",
  54.   },
  55. };
  56. // 分片时,每片的大小
  57. const chunkSize = 1024 * 1024 * 5;
  58. // 文件列表
  59. const fileList = ref([]);
  60. // 删除的文件的ID
  61. const delList = ref([]);
  62.  
  63. const addFile = async (file, filePid) => {
  64.   const fileItem = {
  65.     // 文件
  66.     file: file,
  67.     // 文件ID
  68.     uid: file.uid,
  69.     // md5进度(转圈进度)
  70.     md5Progress: 0,
  71.     // md5值
  72.     md5: null,
  73.     // 文件名，文件展示的名字
  74.     fileName: file.name,
  75.     // 上传状态
  76.     status: STATUS.init.value,
  77.     // 已上传大小
  78.     uploadSize: 0,
  79.     // 文件总大小
  80.     totalSize: file.size,
  81.     // 上传进度
  82.     uploadProgress: 0,
  83.     //暂停
  84.     pause: false,
  85.     // 当前分片
  86.     chunkIndex: 0,
  87.     // 父级ID
  88.     filePid: filePid,
  89.     // 错误信息
  90.     errorMsg: null,
  91.   };
  92.   // 把上传文件加到上传列表前面
  93.   fileList.value.unshift(fileItem);
  94.   // 如果文件大小为0，
  95.   if (fileItem.totalSize == 0) {
  96.     // 表示为空文件状态
  97.     fileItem.status = STATUS.emptyfile.value;
  98.     // 退出
  99.     return;
  100.   }
  101.   // 文件大小不为0，代码将尝试计算该文件的MD5值
  102.   let md5FileUid = await computeMD5(fileItem);
  103.   // 检测md5值是否有效
  104.   if (md5FileUid == null) {
  105.     return;
  106.   }
  107.   // 上传文件
  108.   uploadFile(md5FileUid);
  109. };
  110. // 暴露给父组件 FrameWork,方便其调用该方法
  111. defineExpose({ addFile });
  112.  
  113. // 上传文件
  114. const emit = defineEmits(["uploadCallback"]);
  115. // 异步函数，接收两个参数：uid（文件的唯一标识符）和 chunkIndex（要上传的切片的索引，默认为0）
  116. const uploadFile = async (uid, chunkIndex) => {
  117.   chunkIndex = chunkIndex ? chunkIndex : 0;
  118.   // 获取当前文件
  119.   let currentFile = getFileByUid(uid);
  120.   // 计算切片数量
  121.   const file = currentFile.file;
  122.   const fileSize = currentFile.totalSize;
  123.   const chunks = Math.ceil(fileSize / chunkSize);
  124.   // 给定的 chunkIndex 开始，遍历所有切片
  125.   for (let i = chunkIndex; i < chunks; i++) {
  126.     // 判断如果在文件上传的过程中删除了文件,那么直接跳出循环
  127.     // 调用 indexOf 方法来查找 uid 在 delList.value 列表中的索引
  128.     let delIndex = delList.value.indexOf(uid);
  129.     if (delIndex != -1) {
  130.       // 使用 splice 方法来移除它。splice 方法接受两个参数：要开始移除的元素的索引（这里是 delIndex），以及要移除的元素数量（这里是 1，因为我们只移除一个元素）。
  131.       delList.value.splice(delIndex, 1);
  132.       break;
  133.     }
  134.     // 如果当前文件被暂停,那么直接跳出循环
  135.     if (currentFile.pause) break;
  136.  
  137.     // 获取分片
  138.     // start 变量表示当前数据块在原始文件中的起始字节位置
  139.     let start = i * chunkSize;
  140.     // 如果起始位置加上chunkSize超过了文件的总大小（fileSize），那么结束位置就是文件的总大小；否则，结束位置就是起始位置加上chunkSize
  141.     let end = start + chunkSize >= fileSize ? fileSize : start + chunkSize;
  142.     // 提取从start到end（不包括end）的字节范围，并返回一个新的Blob对象，该对象包含该范围内的数据。这个新的Blob对象（chunkFile）就是我们要上传的数据块。
  143.     let chunkFile = file.slice(start, end);
  144.  
  145.     // 发起HTTP请求
  146.     // uploadResult存储上传请求的响应结果
  147.     let uploadResult = await proxy.Request({
  148.       url: api.upload,//API的上传端点（URL）
  149.       showLoading: false,
  150.       dataType: "file",
  151.       params: {
  152.         file: chunkFile,//要上传的文件分块，它是一个Blob对象
  153.         fileName: file.name,
  154.         fileMd5: currentFile.md5,
  155.         chunkIndex: i,
  156.         chunks: chunks,//被分割的总片数
  157.         fileId: currentFile.fileId,
  158.         filePid: currentFile.filePid,
  159.       },
  160.       showError: false,
  161.       // 报错
  162.       // 它接收一个errorMsg参数，表示错误信息
  163.       errorCallback: (errorMsg) => {
  164.         // 然后，它将currentFile.status设置为失败状态
  165.         currentFile.status = STATUS.fail.value;
  166.         // 并将errorMsg保存到currentFile.errorMsg中
  167.         currentFile.errorMsg = errorMsg;
  168.       },
  169.       // 进度更新
  170.       // 接收一个event对象，该对象包含了关于上传进度的信息
  171.       uploadProgressCallback: (event) => {
  172.         // 从event中获取已加载的字节数loaded
  173.         let loaded = event.loaded;
  174.         if (loaded > fileSize) {
  175.           // 检查已加载的字节数是否超过了文件总大小（fileSize），如果是，则将其设置为fileSize。
  176.           loaded = fileSize;
  177.         }
  178.         // 更新currentFile.uploadSize为当前分块的起始位置加上已加载的字节数
  179.         currentFile.uploadSize = i * chunkSize + loaded;
  180.         // 计算上传进度百分比，并更新currentFile.uploadProgress
  181.         currentFile.uploadProgress = Math.floor(
  182.           (currentFile.uploadSize / fileSize) * 100
  183.         );
  184.       },
  185.     });
  186.  
  187.     // 上传请求可能没有成功执行或返回了无效的结果
  188.     if (uploadResult == null) {
  189.       break;
  190.     }
  191.     // 更新文件信息
  192.     currentFile.fileId = uploadResult.data.fileId;
  193.     currentFile.status = STATUS[uploadResult.data.status].value;
  194.     currentFile.chunkIndex = i;
  195.     // 如果状态是秒传和上传完成，则执行以下操作
  196.     if (
  197.       uploadResult.data.status == STATUS.upload_seconds.value ||
  198.       uploadResult.data.status == STATUS.upload_finish.value
  199.     ) {
  200.       // 上传进度条为100
  201.       currentFile.uploadProgress = 100;
  202.       // 上传结束后,uploaderCallback,将Framework中的列表刷新
  203.       emit("uploadCallback");
  204.       break;
  205.     }
  206.   }
  207. };
  208.  
  209. // 计算文件的 MD5 值
  210. // 会对大文件进行分片处理
  211. const computeMD5 = (fileItem) => {
  212.   let file = fileItem.file;
  213.   // slice 分割文件
  214.   // mozSlice 兼容firefox
  215.   // webkitSlice 兼容webkit
  216.   let blobSlice =
  217.     File.prototype.slice ||
  218.     File.prototype.mozSlice ||
  219.     File.prototype.webkitSlice;
  220.   // chunkSize 每片的大小
  221.   // chunks 切片数量(向上取整)
  222.   let chunks = Math.ceil(file.size / chunkSize);
  223.   // 当前切片的下标为0
  224.   let currentChunk = 0;
  225.   // 创建SparkMD5的实例，计算MD5
  226.   let spark = new SparkMD5.ArrayBuffer();
  227.   // 使用 FileReader 读取文件的数据
  228.   let fileReader = new FileReader();
  229.   // 已删除文件的索引
  230.   const delList = ref([]);
  231.  
  232.   // 加载数据
  233.   // loadNext读取文件的下一个块
  234.   let loadNext = () => {
  235.     // 当前片段在文件中的起始字节位置
  236.     let start = currentChunk * chunkSize;
  237.     // 起始位置加上片段大小，超出文件的总大小（file.size），大小为file.size，不超出则将结束位置设置为文件的总大小。
  238.     let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
  239.     // 来异步读取文件的指定片段
  240.     fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  241.   };
  242.   // 当 computeMD5 函数被调用时，它会立即开始读取文件的第一个片段。
  243.   loadNext();
  244.  
  245.   // 使用 Promise 封装文件分片读取和 MD5 哈希值计算
  246.   // 这个 Promise 将在文件的所有分片都被读取并计算完 MD5 哈希值后解决（resolve），并返回文件的唯一标识符（UID）
  247.   return new Promise((resolve, reject) => {
  248.     // 根据文件ID获取到文件
  249.     let resultFile = getFileByUid(file.uid);
  250.     // 当读取操作成功完成时调用
  251.     // 当 FileReader 读取完一个文件分片后，会触发 onload 事件
  252.     fileReader.onload = (e) => {
  253.       // 向SparkMD5实例中添加数据
  254.       spark.append(e.target.result); // Append array buffer
  255.       // 切片下标+1
  256.       currentChunk++;
  257.       // 如果 currentChunk 小于 chunks（总分片数），则继续读取下一个分片
  258.       // 自动分片解析
  259.       if (currentChunk < chunks) {
  260.         /*  console.log(
  261.           `第${file.name},${currentChunk}分片解析完成, 开始第${
  262.             currentChunk + 1
  263.           } / ${chunks}分片解析`
  264.         ); */
  265.         // 计算当前进度百分比，并更新 resultFile.md5Progress
  266.         let percent = Math.floor((currentChunk / chunks) * 100);
  267.         resultFile.md5Progress = percent;
  268.         // 再次读取数据，读取下一个文件分片
  269.         loadNext();
  270.       } else {
  271.         // 如果当前切片下标不比切片数量小,说明解析到最后了
  272.         // 调用 SparkMD5 的 end() 方法来计算最终的 MD5 哈希值
  273.         let md5 = spark.end();
  274.         /*  console.log(
  275.           `MD5计算完成：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
  276.             file.size
  277.           } 用时：${new Date().getTime() - time} ms`
  278.         ); */
  279.         // 释放 SparkMD5 实例占用的资源
  280.         spark.destroy(); //释放缓存
  281.         // 设置 resultFile.md5Progress 为 100，表示进度完成。
  282.         resultFile.md5Progress = 100;
  283.         // 设置 resultFile.status 为上传状态
  284.         resultFile.status = STATUS.uploading.value;
  285.         // 设置 resultFile.md5 为计算得到的 MD5 哈希值
  286.         resultFile.md5 = md5;
  287.         // 调用 resolve(fileItem.uid); 来解决 Promise，并返回文件的 UID
  288.         resolve(fileItem.uid);
  289.       }
  290.     };
  291.     // 当读取操作发生错误时调用
  292.     fileReader.onerror = () => {
  293.       // 将 resultFile 对象的 md5Progress 属性设置为 -1，表示 MD5 计算过程遇到了错误。
  294.       resultFile.md5Progress = -1;
  295.       // 设置文件状态为失败
  296.       resultFile.status = STATUS.fail.value;
  297.       
  298.       resolve(fileItem.uid);
  299.     };
  300.     // Promise 链的一个捕获处理器（catch handler），用于处理 Promise 链中任何地方的错误
  301.   }).catch((error) => {
  302.     return null;
  303.   });
  304. };
  305.  
  306. // 根据文件ID获取到文件
  307. const getFileByUid = (uid) => {
  308.   let file = fileList.value.find((item) => {
  309.     return item.file.uid === uid;
  310.   });
  311.   return file;
  312. };
  313. </script>

（2）使用组件，Framework.vue中

  1. <template #default>
  2.                         这里是上传区域
  3.                         <Uploader ref="uploaderRef" @uploadCallback="uploadCallbackHandler"></Uploader>
  4. </template>

引入

import Uploader from "@/views/main/Uploader.vue";

回调：

  1. // 上传文件回调
  2. const uploadCallbackHandler = () => {
  3.     nextTick(() => {
  4.         // 它首先等待DOM更新完成（通过nextTick）
  5.         // 然后重新加载一个组件（可能是router-view）
  6.         routerViewRef.value.reload();
  7.         // 并最后调用一个函数来获取空间使用情况。
  8.         getUseSpace();
  9.     });
  10. };

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/583942
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。