项目名称：Easy云盘

项目描述: 一个仿百度云盘面向C端用户的网盘项目，包括用户注册，QQ快捷登录，文件上传，分片上传，断点续传，秒传，文件在线预览，包括文本，图片，视频，音频，excel，word ，pdf 等文件在线预览，文件分享等功能。

技术选型：Vue3 +  vite3 + vuex

负责内容：

• 1.  用户注册，登录，QQ快捷登录，发送邮箱验证码，找回密码。

• 2.  文件分片上传，断点续传，秒传，上传进度展示，文件预览，新建目录，文件重命名，文件移动，文件分享，删除，下载 等功能。

• 3.  文件分享列表，取消分享。

• 4.  回收站功能，还原文件，彻底删除。

• 5.  设置模块  1、超级管理员可以看到所有用户上传的文件，可以对文件下载，删除。 2、超级管理员可以对用户进行管理，给用户分配空间，禁用、启用用户3、超级管理员可以对系统进行设置，设置邮箱模板，设置用户注册初始化空间大小。

• 6.  用户通过分享链接和分享码预览下载其他人分享的文件，同时也可以将文件保存到自己的网盘。

项目难点：

• 1.  为了实现秒传，在文件上传前需要对文件进行MD5，避免文件过大，浏览器内存溢出，采用SparkMD5对文件分片MD5，文件分片上传，使用Promise 完成多文件同时上传，文件开始上传，暂停上传。

• 2.  多级目录线性展示，结合路由，刷新后任保持目录层级。

• 3.  文件预览，根据不同的文件类型，接受不同的数据类型，包括arraybuffer,blob,json类型的数据。

• 4.  文件分享，用户打开链接后需要输入分享码才可以读取文件，输入后，在一个会话内状态一直保持，session会话结束后，需要再次输入分享码。

项目收获：

熟悉了第三方登录接入流程，比如QQ登录。云盘项目不是简单的增删改查，对大文件采用递归调用完成分片MD5处理，大文件分片上传，解决了实际项目开发中对大文件的上传处理。根据不同的文件类型，使用不同的插件完成文件的在线预览。比如视频的分片播放，pdf,excel,word 在线预览。通过这个项目让我对vue的相关知识点，比如数据双向绑定，组合式Api,生命周期函数，状态管理，路由，watch，父子组件，组件封装，表单校验，页面布局，css编写等有了更加深刻的认识，此项目将所学的前端知识进行了综合运用。

小内容

使用变量opType记录 登录，注册状态

多个状态的所有元素装在一个组件内，v-if 控制不同状态下的元素显隐藏

在切换状态时，重置表单

提交表单时

密码为md5传输，md5 哈希加密

路由重定向到主页面

更换头像时，加上时间戳（随机数），改变地址，防止缓存，图像没变化

输入框获取焦点时，使用nextTick(),配合v=if使用，因为使用nextTick是在dom更新后才起作用，但是v-show dom一直存在，不更新，不起作用

上传文件，el-upload

文件列表数组包含：文件名，文件大小，文件uid，上传进度，md5值，md5进度，上传状态，当前分片，错误信息

状态分为：空文件，初始解析，失败，上传中，上传完成，秒传

文件组织：每个文件有一个唯一id，还有一个pid（在那个文件夹下）

上传先转码，md5

fileReader类 onload

大文件切片，计算开始和结尾，调用slice,分片递归读取，分片计算md5值，之后把md5组合在一起

后端ffmpeg把切片组合

文件秒传:原理：在文件上传之前先计算出文件的hash，然后发送给后端进行验证，看后端是否存在这个hash，如果存在，则证明这个文件上传过，则直接提示用户秒传成功

文件删除，传id

文件预览，一个遮罩

图片 直接el组件加上链接

视频使用dplayer 和hls（流媒体协议）分片传输播放，前端得到的是ts切片

文件分享，生成一个链接，，然后通过链接去获取分享列表，渲染，后获取下载链接

基础知识--Element组件

• el-form Form表单

  • 表单验证
  • rules 定义规则
  • validate 对表单内容进行校验

• el-form-item 表单项

  • label 内容项名
  • prop 设置为需校验的字段名

• el-input 输入框

  • placeholder
  • v-model.trim绑定时，加上去掉空格

• el-select

• el-button 按钮

• Dialog 对话框 弹窗