VUE3操作系统之【文件管理】

回顾

VUE3开发操作系统日志【窗口拖拽，碰撞检测,附带代码】-CSDN博客

概要

作为一个操作系统，文件管理当然是必不可少的存在

这可不是静态作秀的页面，是真实的文件增删改查

本期会分享一些上传的技术细节

在线预览：AX

先看长啥样

技术选型

前端：Vue3+Antui+Splitpanes

后端：Java

• Java负责返回所有的文件路径，注意，如果是文件是图片，需要返回预览图。其他文件在打开的时候进行查询。
• 主要用到ant的树形组件,不是a-tree

   <a-directory-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      multiple
      :tree-data="treeData"
    ></a-directory-tree>

• Splitpanes用来做拖拽伸缩，官网如下GitHub - antoniandre/splitpanes: A Vue 2 & 3 reliable, simple and touch-ready panes splitter / resizer.

框选

效果

描述

1. 每个文件【div元素】理解成一个小矩形,鼠标拉出来的框理解成一个大矩形
2. 当他们相交的时候，把小矩形加入到一个集合（Set）中，Set用于防止重复添加
3. 在可框选的区域用data-area标记，不然用户在任意地方能拉出框，这是不合理的
4. 在点击空白处时候，要取消已框选的内容

基本操作

效果

描述

1. 文件的增删改查要基于一个思想，一切都是路径，文件夹也是一个特殊的路径
2.  如创建一个文件夹，前端传一个路径：/home/test
3. 文件copy需要注意，复制的变量应该是一个数组，里面复制的内容，也是路径

文件上传

效果

描述

1. 第一个上传的是单个文件，第二个视频上传的是项目打包后的文件
2. 是的，项目打包后，可以通过这里上传到云端
3. 简单描述下实现流程，文件在拖拽到浏览器中的时候，把文件的路径和文件名提取出来

4. 这是点击上传按钮的代码

5. const fileList: UploadFile[] = Array.from(files.value).map(file => {
       return {
           file,
           path: file.webkitRelativePath || file.name,//文件或文件名
       };
   });

总结

毫无疑问，这不是一个流量工程，它的确有实际作用，代码文章皆为原创