day6---(练习)实现一个网盘[uni-app云开发入门到实战]原创

哈喽小伙伴大家好，我们上个视频说，就是这期视频啊。准备做一个那个网盘，我们这里用的是H5做的啊，就是有些问题就是啥呢，就是H5它不支持那个。啊，这个文件保存到本地哈。就是S，那在这里呢，我们只是获取它的那个。啊，临时临临时路径，因为我们获取临时路径就可以保存本保存到本地了，对吧。啊，我们就是通过这个。啊，这个文件下载获取人生路径啊，那那这个H我们就不写这个文件下载了。啊，这里的下载就是。获取临时入境啊。呃，我们再看一下这个数据表，数据表就两个，一个是就是用户的。呃，对应的文件表。我的网太慢了。还包括这个文件夹名，如果是文件夹的话，它它是有的，然后这个。啊，文件存储的ID，文件层级文件类型啊附文件上级就是他上级谁还有那个文件标识符，标识符这个我的我这里修改了，又加了那个文件名称和那个大小。

呃，各方面区分嘛。如果他要上传就是同样的文件，但是不同的名字，大家可以实现。或者他要上传那个同样的名字啊，不同大小的，他也可以实现。啊，这个这个ID的。啊，这个MY里边这个ID。太慢了，它对应的就是F里面的这个存储ID。啊，这这这个啊非有name，就是文件名，文件链接，文件大小，文件类型和文件哈希值。我们这个数据表讲了，我们来看一下我们的程序啊。这个这个程序它是支持就是。啊，比如说我存过一个这样的文件了哈，啊，比如说我我我的第一层遗存了，但是只要存过的文件名，文件大小是这个，还是文件也是这个的，那以后我们在存的时候，它就不会再次上传，就是直接指向那个文件。

啊，我们这里就是。砸住了。我这我这个我在我我这个无线网这个网今天网超级差的。这里就是我们可以忽略这个这个不管，因为他我们在那个后边十张的时候会选一个网盘。啊，就是带带用户区分什么都有的，这个是因为排序的时候我们的表示空的嘛，用户什么都没有啊，这里我可以新建一个文件夹，比如说我要呃文件。三一好，我这里新建新建了一个文件夹，这里新建文件夹已经成功了，我们可以点进去看一下。这是0.1哈。看这请求老慢了。非常烦。对方这也是不用管了，这文件夹也已经进来了。啊，因为我刷新了嘛，刷新了之后它是呃，页面是从那个首页开始的，我重新进来那个首页。

啊，我们看到这个这个这这现在呢，我们在这个，呃，这第一层就首页嘛，我们上传一个文件可以看看上传一个还。要是不行我就换一个，换成换成自己的网应该会快一点。可真的发生事是吧？这里已经上传完毕了。都让他那个刷新一下这个东西。啊，这个获取的时候。啊，有点慢啊，网有点慢啊，这里已经有了，对吧，我们点下载它就会这个下载到本地，提供一个临时路径啊，这个路径我们应该是可以访问的，在这里不访问应该本地路径。如果如果你不是这个H5的话，你可以通过本地路径，也是刚才说的这个，呃，这个C费。

保存文件到本地，这就可以下载了嘛，然后我们可以进，现在我们曾经有有了一个对吧，那我可以再次上传一个文件。剩下一个就是和他，呃，文件那个就是它的缩小版嘛，这个。然后等待等等他这这个显示百分百了。他需要把这个它调用函数。再让他刷新，就是我想我没有写，好像没有写提醒啊，就是。啊，这个有写提醒，这里也已经上传完了，看对吧，他俩是。那个。同一个就是值大小不一样的啊。这这个文件大小，我们我们也能显示出来，这个时候呢，我们进这个文件夹一，呃，我们也可以出现一个文件夹二。啊，同样也是可以的，今天给你啊。

看到这边网络请求啊，这个是说的我们排序的，我们那S排序就是把这个文件夹排到前面。那这里呢，我们可以那个随便点，随便点一个文件夹。啊对，用肩夹，而且色的同样，因为绿色的那是空的嘛。那我们在文件夹一里面，我们也我们也上传一个文件，我们也同样上传开的。网速慢呢，上海空间都特别慢。刚才我请求的时候就是老是请求不成功。特别慢啊。那我们就等一下吧，我们我也不发网了啊，这里就是返回这个上传文件这个啊云存储地址，你看这里我们也已经上传上传完成了啊，那这里并没有显示百分百，为什么是没有显示百分百呢？因为我们这个文件没有再次上传哈。

就是你可以看到我们的手机表里面这个feels，呃，等他刷新出来给大家看一下，网比较慢。应该是有两个，就就是这个head啊的平剂和这个里面的head的平是一个的，就他俩只同一个文件。哎呀，这个。它是同一个文件，你以看到这里只有两个文件对吧，一个是这个大的，一个是小的，这个这个那个文件夹一里面那个指向的是，他俩指向是同一个啊这怎么怎么看呢？在这个my feels里面。你可以看到我们刚才那个。层级是一的，就是文件夹一，它它属于文件夹一的。他这个非ID啊，和这个它属于层级是零的啊，我们找到那个，我们上正常找到，找到这个肯定是有一模一样的啊，意思看有一模一样的对吧。所以啊。我们实际上这个功能，这个功能是怎么实现的，就是通过这个哈希纸对比，对比这个文件是否。

是否一样，如果一样的话，就那个。啊。就是不再上传了。啊，我们这里就是。啊，文件夹也也宣传完成了啊，文件夹也创建也可以了，但是我们可以就是你在这里，如果你觉得这个不够的话，你可以在这个文件夹里面再次创建一个。啊，申请申请文件夹好。这个啊，家费物这个。不用管它这个，我我我新建一个啊。首先你们选一个叫。呃，文件夹还是文件夹一。发断电，哎，应该是代码两个页面它好像不一样啊。我我改一下啊。这个。嗯，因为这个两个页面按理说是一模一样的。它只是它为什么可以就是实现，就是来回交替文件文件文件文件三个再返回呢，它其实是只有两个页面的。

它只有两个页面的。啊，这个时候他们这时候我回到这里啊，刷新一下首回到首页刷新一下。通到进言加一这里，这里刚才已经创建完毕了啊，就是因为渲染的时候啊，我这里没有改动。我们点一下文件夹一，同样也是文件夹一，这应该就是回到这个三了，我们返回上一个，它还是文件夹一，这是这是第三集的文件夹一。嗯，唱出一个啊，为什么。哎，很快就完成了，就是因为网络波动嘛，啊不一样啊，可以看到，可以我们可以刷新一下看到就是。啊，曾经唯一的。那就是我们第二层，就是第二个就是从首页进来的一个文件夹一。这有一个文件夹一啊，它这个啊分有列是二的，就属于。下一层的这个文件一的文件。啊，还是同样的文件，你看它是一样的指向。

对吧。受网络不同影响，我可能不能给大家影响太多了，这只是我们写的一个简单的例子，我们通过后边就是在实战的时候结合这个UN嘛，UNUN。的ID就是啊，喜欢说成I啊，就是UNIDUNI-ID啊UN啊UN。哎，我们会做一个结合去开发一个就是啊手机APP或者那个小程序，就是网盘，你可以就是你可以自己自己搞搞一个网盘嘛，至于至于这个网盘的速度呢，就受限于这个云服务空间它的上限的限制。别的也没有什么限制了，嗯，那个代码写的比较乱，我没有优化。啊呃，也有重复的代码，但是我讲一下这个逻辑哈，就是上传，我们上传文件呢。啊，就是调用这个云。呃，函数这个上传文件就是new有费嘛，啊，那个Apple费newlo就是创建一个新文件夹啊，就是lo，我这里也没有对应啊，就是flood创建一个文件夹，包括这个文件层级，它的上级。

呃，他他的层级还有他的名字对吧，所type肯定是那个他吧，因为它因为它是文件夹啊。嗯，还有就是。外外边声音比较小，然后就是这个上传文件，它它它是怎么怎么走的，它是啊，我们上传文件是是。先看一下这个页面啊，这这一块啊，这个比较乱，首先呢，是我们先。啊。调用原函数啊，不是这个这个这个不好意思，这个是那个文件夹，原来我们先就是让这个百分比为零，就是代表。我们如果我们上传两个不一样的文件嘛，我需要从从零开始进行调料分布，对吧。然后这个。你先选择一个文件，然后获取这个文件的临时临时路径对吧，就是临时链接啊，拿到之后呢，我们获取获取这个文件，它调到这个名字，我们讲过那个选择文件对吧，选择选择图像，通过这个is点啊，才用FILE0点，那获取这个文件名对吧？要用文件名呢，就是来区分文件对吧。

这个东西大家可以也可以不管，就是我有个这个是测试代码，我还没有就是优化什么的。也不打算优化了，这个我们会不会重构啊，就是先进行一个网络请求，请求什么，就请求请求这个文件啊，就是你的本地文件，就是把它转成B，然后去进行一个哈希值。就去哈西。啊，取哈西之后呢，呃，我们取哈希的时候是加上文件名的，一起取哈希。然后在这里呢，呃，我们对比对比这个数据库里面有没有，如果数据库里面有过的话，我们就。啊，这个是大于零的时候对吧。因为我们数据库已经有了，那我们就把这个数据库的这个数据。

拿出来，然后这个就是调用云函数上传文件，就是给用户的，给用户自己的那个添加一个文件，指向这个文件。如果他没有添加的话，那说明这个嗯，肯定是不成立的，那我们就else else就首先先上传文件。反正文件就是我们给他命，文件命名就是云，呃云云端路径，那个文件命名是怎么命名的，我们这样写的，当前的时间轴。啊，取十位加上那个文件名。加那个文件名。然后这个其实这个应该可以改成那个费用内容，我没有改啊，这是因为写的比较杂乱，那就就是这个是文件名，这个文件路径啊。啊，就是我们对应的最上面这个is嘛，然后。呃，这个这个是lo的progress，就是监听这个上传进度啊，我们通过这个东西可以计算出来这个百分比，如果是大文件的话，它的它的那个数字会来滚动的，都重新拿回买小文件的话。

他就直接百分百了。然后下一步就是。呃，怎么呢，就是这个打印看一下名次可以不管，就是我们把这些。就是我们这个。啊，New执行new u函数，它需要的这些参数都给它传过来。啊，就包括是包括文件名，文件层级啊，文件链接文件那个大小，文件类型。为什么要从这类型呢？这个机构我这里是先从这的，等那个我们实际演实实际练习的时候，实际开发一个云盘小程序或者EQ的时候。我们可以通过这个类型去查看，比如说他是视频，我就给他播放视频，它是我，它是图像，我就给他查看这个图像，就是让它充满这个屏幕。如果他是别的文件呢，然后我们就T啊，我们也可以也可以调用一个就是。啊，文本啊，给他展示出来对吧，这些都是后话了啊。把这些传过去之后啊，进行这个云函数，其实这这两个重步骤是有要重复的，完全可以省略一步，把它把这个这些参数都获取完之后再去调用，因为我这里就是。

写的时候一点点写了，写完之后再看到没有也没有优化。嗯，他他这个思路就是这样的。就是再讲一个就是上传文件，上传文件就是先。呃，选择文件，选择文件获取这个文件的哈希啊，通过哈希对比看看有没有那个已经存在的，如果已经存在的话。他就不在。上传文件直接就是把那个文件的ID啊获取，通过文件ID获取那个文件之后，也不通过ID，就通过哈希值，通过通过哈希获取这个文件的这个信息，然后再传过来。呃，执行这个用户这个new。存到用户里面，存到用户的是你的文件那个里面。啊，就就这样存存了。啊，就是可以解释成就是。用户把。公共的文件就是在这这这这里生成一个映射，可以指向那个文件，也就是说他可以用这个文件对吧。

然后呃，如果没有就上传，然后获取这个这个云端链接，再传再传回去。文件夹就是呃，通过什么，通过我们我们每一次就是页页面页面载入的时候啊，都会支行一个就是获取这个层级，比如说我们刚进来的时候，层级是零嘛，我们点点点层级为零的文件夹一，那进去之后就是层级为二了。它里面那个层级肯定要加一对吧，就这样。然后根据层级，我们要有个，我们可以看到这个，嗯，有发里面有层级，有有这个名字。就是他他上级，他上级是谁，比如说我在首页里边创建那个文件夹一，嗯，那他的首页因为是那个空的，所以它那个内肯定是空的。然后它层级是零，首先是曾经为零，对吧，它类型是负，就是它是文件夹。啊，这个他名字就是这个文件名，我们自己命名了，对吧？啊，因为这个发内部我也设置设置设置成那个。

呃，就是层级，根据层级和这个。我叫杨明。来设置一个索引，就是就是我在在首页可以创建文件夹，也在在那个首页的文件夹里面也可以创建文件夹，就是同样的名字，它都可以去实现。嗯，这个下载就是获取他这个临时下载就是本地落定。呃，获取了本路径之后，你把它存到这个本地就非常简单了，这就不大讲了啊，这就是渲染，如果它是这个，如果it点也就是可以看到我们这个获取文件里面。I few，我在这里加入加了一个few，如果如果就是这是文，这是不是文件夹是个文，文件的话就是。他有这个属性的。他如果有这个属性，我们就认定它是一个文件，然后就一定个形式展示出来，如果它不是文件，那就是文件夹，就是文件夹的形式展示出来，在这里我们也用了一个数据，数据这个过滤器啊，啊把这个数据给简单处理了一下，就是处理成啊KPMB和GB。

的形式。嗯，这个大家也可以回头练习一下呀，因为我们之前不是也在第一个视频里面讲了这个UVOUI的整合，大家可以通过这个U。有没有UI啊，去看一下。它这里面有些组件有模板，还有他的GS，它的这个他这个GS啊，这个比如说MD我加密啊，我我是蓝省事，我这个里面是没有整合，有VIVO的M，我直接把的MD复制进来，复制后自里。啊，这些东西都可以都可以用的，对吧，然后这个组件里面有。很很丰富的对吧，你可以完全可以用卡片来去做这个文件形式。啊，你们可以看看有没有用啊，非常好使啊，还有就是再给大家讲一个，讲一个就那个什么。呃，叫an animal anim这个是一个那个动啊。

大家也可以就是引引入进来非常好使，在这个手机在交互的时候啊，或者在一些那个组件弹弹就展示的时候都会非常好看，看到没有这个flash。这个这个就不用我们自己写了，这些动画你自己写的肯定很麻烦，对吧，还要控制时间，什么来回动啊，怎么动啊，人家已经写好了，这个是这个怎么用，这底下都有，如果你是NTM安装对吧，如果你是一个HTML引入的话。然后这个引用方式有有有可以这种有人就是在这个卡特里面直接写，或者就是。你自己写一个样式，写class，写个样式列表，然后在这里面写啊，这个就是box，就是我们上面这个这边的。貌似对吧。然后这个底下就是底下就是。需要时间持续时间吧。非常简单的，就这就这一个东西是他们的。然后我们就。啊，这个视频讲到这里，大家可以自己去练习一下，然后去呃实现这个。

啊，这个什么啊，对这个网盘啊，我我也会把这个代码给整理一下，就是包括这个。呃，云这个这个数据数据表我也给你弄弄下来啊，下载这个我都下载之后，然后我会打包发给大家，在这个课件里面。那个谢谢大家，这个视频就到此结束了。