00:00
大家好,这节课我们来继续解决上节课遗留的问题。来。嗯。找到它是在哪加的呢?是这看到没有设置的f.ul等于这个OSSDR加费name对吧,是不是前面我们是不是还得给它加上这个。Host加上它的这个域名,再加上这个OSSD,这么去调整一下是不是才对?清楚了吧,啊好,接着我们来发现,再来看一个问题啊,就是说我们上传的这个文件,你看看直接就是上传的,而且没有加这个目录。那这个明显不是特别好,这样的话,我们的文件都会在这个根目录,所以我们想要给他去设置一个D啊,设置一个这个目录好吧。啊。那。因为这个服务端没给我们返回目录,所以我们可以自己去定义这个目录。清楚吧,啊,我们在哪呢?在这来定义这个目录。
01:02
Cost ER等于什么呢?比如说等于这个。嗯,React,哎,对,我们这是react的这个课程嘛,React。下面的。啊,就就写react吧,啊,加个这个斜杠,然后我们让这个目录。这里是定义的文件名,对吧,我们让这个。目录去连上这个文件名清楚吧?啊,当然呢,嗯,不好说这个服务器它有没有去给我们返回目录,所以我把服务器的这个也给它连上好吧,那这边把我们自己定义的这个目录也给连上。清楚了吧,啊,如果大家看的感觉比较懵。我带大家大家稍微解释一下,我们这里是定义的这个文件名,实际上在阿里云中,你前面连上这个文件的目录,它就会给你创建指定的一个目录,知道了吧,那这个是最终我们文件就说显示的ul,我们连上这个域名,再连上这个目录,好之前我们没有连这个目录,对不对?没有连目录我给大家看一下是什么情况的啊oss。
02:03
这是我本地的一个oss客户端,就是可以查看阿里云的这个,呃,存储的一个情况,那我们来看一下,呃,是在这个库里面存在的,这是我们刚才上传的这几张图片。看到了吗?这是刚才我们上传的几张图片,都是直接在这个整个根目录里面,显然不是特别好啊,我们想把它给传到某一个目录里面,所以就是连上刚才那些目录,那这些我就先给它删掉啊。嗯,来那个。更多里面有一个删除。啊,这也是为什么我要在这个代码里面,我给它加上一层目录的原因,这样就不会乱,那我们来再验证一下啊,你看现在这个我们的OS里面是没有react的这个目录的,对不对?现在我来上传一张图片。啊,刷新一下啊。来,这时候我来新建。选择上传一张图片。好,就还是不可一吧,上传成功,而且呢。
03:01
这边也显示了对吧。啊,这个还是有问题,你看它react react连多连了一层啊,多连了一层,这个我们等会代码可能有问题,再再去检查一下啊,先看我们的oss这边。刷新一下是不是就多了一个这个。嗯,这个不对啊,这个怎么多了一个avs。我们看看这个。那这个上传的目录有问题。来找一下代码改一下。我们定一个目录,DD2。嗯,哦,我知道怎么回事了。这个是文件的这个名字啊。然后他上船的时候。他是找的是谁呢?是。
04:00
看一下上传的时候,你看这个是上传的额外的参数嘛,他取的是谁?取的是这个K,取的是文件的这个URL,我们不想这么做,我们UR上传它只负责显示,所以我们可以再额外的定义一个字段,和这个带这个at tvv的区分开,区分开明白啥意思了吧。好,那这个文件名我们再来复制一个,再来定义一个K。就是feel加K,再给非加一个属性K,那K呢,就是我们的这个。清楚了吧,啊,那其实前面的这个feel就是文件名,我们也不用给他,连目录就是说。这个K。啊,我们让这个目录连上这个文件名。啊,为什么要这么加上那个参数呢?是因为为了和这个UR区分开,之前他上传的时候,这边额外的参数配置的这个上传的这个,呃,位置的话,他用的是URL对不对,那URL呢,没有这个AP,没有这个域名,我我们把这个域名加上了,那上传就不对了,你看看我们这时候就会他会上传APS这个目录这个里面,然后一层一层的给你,给你。
05:05
往这里面传,看到了吧,那肯定不对。怎么办呢?所以我们再额外的增加一个K,这个K就是oss的目录,加上这个我们自定义的这个目录,然后再加上这个费内是吧,那最后我们额外的参数这边就取这个K就可以了。这边就取这个K就行了,这边这这边要改一下啊。嗯,这就没问题了啊,那URL呢是我们用来负责做显示的,K呢是用来做上传的时候,就是给他这个参数用的,好吧。这时候再来看一下啊。啊,那这个既然上传错了,就把它删掉吧。删除。好,没有了啊,来,我们再来试一下。一定把这个问题给大家解决。新建。选择上传。图片。好,不报错了是吧,图片也能正常显示,而且你看图片的地址是不是也对了,哪怕我去点开也能访问了,对不对。
06:02
啊,虽然是下载了,但是还是刚才我之前给大家讲过的这个问题啊,是因为这个。阿里云台斯的这个设置嘛,大家注意下时间,你看06:10那个06:10那个这个就是。我们就正常了啊。那这块已经画完了,但是这个,呃,再来看一个问题,我们先把这块。这块看看有什么还能调整的没有了啊。嗯,K也给上了,好的注射给大家写上了啊,主要是这一块,这个K是取决于上传的,对吧,就是上传的时候用的那些配置嘛,所以我们在这里定一下嘛,主要这个URL呢,是就是上传之后用来做这个回显图片显示用的,所以我们把它给它连上这个域名嘛。这块大家不要不要绕进去啊。接下来我们再来看一个什么事情呢,就是。呃,我们现在只是刚才为了测试上传,就随便把它给导入进来了,但这这样不是特别好。啊,我们想要让它和这个表单结合到一起,并且还能加上自己的验证,对吧,就是我们要用自己定义的上传组件取代取代这个。
07:04
啊,大家想一想。大家来看一看我们这个结构啊,这个结构这个是不是有点特别像那种我们使用的这种第三方的一个组件,看到了吗?第三方的一个组件对不对,那第三方的一个这个我们就不要了啊,那第三方的一个组件的话,我要想让他给他加上验证,并且加上这个level可以使用谁是不是可以使用这个。Form item啊,我这里说的第三方的意思啊,就不是说是那个真正第三方,就是说不是这种标准的这个这个formal text啊,或者input啊等等。啊,那这时候我们想加一呢,就可以给它包一层这个分母S来。能不能验证成功,我们一试便知啊。嗯,这个底下少一个点item。我感觉还是少东西了,先撤销吧。刚才应该是复制错了。
08:03
啊。先撤销啊,那我要再去复制一遍。嗯,在整个我都复制上吧,因为验证规则我也得要是吧。嗯。来放到它上面。结束符,好把它给向里面缩进一下啊,接着改一改,那我们这边上传要的这个内幕是谁,是不是cover。名字改一改啊,商品主图,那这个是请上传商品主图,好的来看一下啊。诶,这是不是就有了商品主图,并且在这呢,对不对,诶提交验验证也生效对吧,当我上传完文件之后。哎,这个验证就没有了,就通过了是不是那很好,接着我们再来看一个问题,就是这个to up这个玩意怎么改,那不可能我们都叫这个东西啊,对不对,我们看看这个东西是在哪写着呢?是在这个这里面,就是我们组件这里面,这里写着呢,是不是click to up啊,比如说是点击上传,点击上传。
09:12
嗯,改它就可以了是吧,来接着看看。好,是不是就变了?嗯,比如说点击上传什么呢?上传这个商品主图。来再看一下这效果是不是就变了,点击上传商品主图,但是我们来想个问题,我们这边用是点击上片上上传这个商品主图,你如果是轮播图那里用的,那你就是点击上传轮播图了,所以说作为一个啊公共的组件,我们这里写死,把文字写死太不合适了。所以我们想怎么办,我们想把这一块空间给预留出来,你用到我组件的时候,你自己填充啊,你想要填充什么填充什么。是不是这么回事啊,把它给空出来。但是空出来之后我怎么占位呢?怎么填充呢?那在那个view里面我们可以使用插槽是吧?在怎么办?我们是不是可以从这个这个this.pops里面点children拿到它所有的这个。
10:14
这个。子子组件对吧,子节点对不对,我们之前用过这种传单方式啊,那我们在使用这个组件的时候呢。就不让它自闭合了啊,我们这样手动去就是让它闭合,这里面写的这个东西是不是就会被这个children这个purpose给接收到,就是我们在这个组件标签里面,就两个组件标签里面包裹着这个东西,是不是就会被这个组件的purpose的这个children属性给接收到,就是被被它给接收到,是的吧,以前在讲这个原料基础的说过啊,那我们来验证一下好不好使啊,来我们自私在这定义的啊,为了验证我在这写个三个一在。来新建。是不是就有了好非常的棒啊,那假如有的地方我就不想用这个按钮图片,那我只要去更换一下里面的内容就可以了。
11:09
明白了吗?这样封装才会比较灵活。好吧,好来,那我们的这个阿里的这个oss上传再看一下注释应该给大家写完了,这些属性我就不写了,你去手册自己去看就就完事了啊。然后这个大家注意一下吧,因为这个大家可能会比较乱啊。就是这个我们定义的这个K,就是在这个方法中,方法中函数中。会用到啊,用于上传文件。就是。嗯,就是在这个。云存储,云存储中存储的文件的这个K啊。
12:00
我们不说文件名,就说K啊好,那这个我们为什么要在定义就把这个UR加上host呢?URL一般是我们在上传完成后,上传完成后啊用于显示。内容啊,显示内容听到了吧,啊,这个是UR的这个作用,那其他的这个文件名的一个处理啊,文件名呢,这里呢,它是用这个当前的这个时间一个戳,然后加上一个随机一个字符串来去上传的,就是嗯,文件名的这个算法呢,大家尽可能的。不要重复。哎,假如你上传这个文件,别人也上传文件重复的话,就可能会给你覆盖了。对吧,那我们这里是定义了一个目录啊,定义一个上传的目录啊。因为这个服务端它返回的这个目录可能没有返回啊,所以我们自己也定一个啊。嗯,这个也给大家写一下,如果。啊,这个签名。签名过期了啊,那就重新获取呗,是不是重新获取这是签名嘛。
13:07
嗯。这个是服务端返回的签名,然后它乘以了1000啊,然后这边因为这个GS的这个时间戳啊,和我们服务器端返回的这个时间戳呢。就是GS的话,它要乘以一个1000才行,所以它在这里乘以1000,接着再往下看,嗯,额外的上传参数。啊,其实真正的我们能外部端就是浏览器能直接向osh传文件,靠的就是这个额外的上传参数,那主要是带了这个上传的策略以及签名。清楚了吧,还有这个AK,然后这个就是文件的一个名字了啊,文件的上传这个名字,然后接着就是。在上传过程中触发的回调函数,这个其实我们可以再优化一下,那怎么优化呢?老在这儿conslo也不好,我们想要上传完成的时候,比如说呃,给你弹个消息提醒啊,诶文件上传成功,那这样体验是不是会好一点呢?是不是这样的?
14:00
啊。嗯,也简单啊,那我们这个就通过打印呢,我们知道这个。这个里面啊。他有这个一个状态,就是当那个状态等于单的时候,就是上传成功了,对吧,而且。他打印的这个东西是一个数组,数组的话呢,其实不是特别。它适合我们去用,明白了吗?你看打印的是一个数组,还要从中第零个里面去取出来的一个文件,然后看他的信息,实际上这是官方例子,它这么写的一个呃,一个一,一个不太好的地方,它是从你看从参数里面去解构出来的这个fair list。啊,那我们如果不结构,我直接就想打印你的这个参数,我想看看你这个参数是什么。啊,那这个我们就先删掉啊,啊,我就想看看你这个参数是什么好吧,啊,这个我也不要啊来我们。嗯,看看代码应该是没有问题。
15:00
查查好,等会我们再说变量名的事啊,就现在我都不知道是什么啊,我们先打听打听看看吧。来清空刷新。新建啊,来选择一个文件,这是我们的talking,就先给它删掉,选择一个商品的主图,还是这个图片啊。你会发现。我直接打印参数的话,它里面直接就有feel,是不是它有两个属性,一个feel有feel list之前我们是解构的feel list,但是你会发现它直接就有feel feel我们就可以直接拿到它的这个大小啊,状态啊等等,我们直接看最后一个这个feel的状态是不是,但上传完成,那我直接拿这个feel判断是不是更好呢?清楚吧。嗯。那所以呢,我就先撤销啊,也也不撤销了,我就不解构feel list,我就直接解构费去使用这个费是不是会更好,对不对,那我还可以判断这个feel的这个状态,那打印我就不打印了,If fail.state。
16:00
啊,等等于。Do是不是就上传完成了,那这时候我是不是可以弹一个消息message success上传成功可以吧?那刚才我在使用这个message的时候,它应该是自动帮我引入了啊,看到了吧,那这个按钮呢,不用的话就删掉啊,如果没有自动引入,手动引入,然后这个图标也不需要。啊,那。看一下。还有没有能删的一个东西啊,这是我们这个定义这个状态。啊,这个也给大家写一下啊,组件挂载完成。完成后获取oss配置啊。进行初始化,进行初始化获取oss配置。啊嗯,那这块这个输出就不要了啊。这个是获取了配置之后,设置这个状态嘛,如果有错误去啊,他之前应该是也是引入过这个message了啊,那么这里我们上传成功就是提示个上传成功。
17:07
啊,先这么写,因为以后可能还会有其他的判断,我们再说吧,好吧。嗯呃,应该也在给他。啊,如果大家要写进度条的话,你有可能需要用到那个它的这个进度啊,就是它这里面会有一个属性,比如说是这个啊这个啊就是他上传的一个进度嘛,啊到这你看百分百了就完成了是吧?一个比较大的文件的话,你要想计算他的这个上传的一个进度,就可以用到这个东西啊。好,那我们加了这个消息的提醒,再来测试一下就完事了。来新建选择商品主图。好上传成功是吧,而且这个也可以预览,那通过这个OS这里面呢,我们也这个react,诶刷新一下应该会有一个react的目录。这呢是吧,里面是我们刚才测试上的这几张图片啊,时间呢,你看都是这个六点十分到十三二十二等等啊,时间都是对的啊好,那这节课呢,我们就把这个。
18:05
上传组件和oss进行一个结合,并行进行一个封装,对吧?啊,放到我们那个公共组件里面,因为其他地方也可以用到,好的,那这小节先到这里。
我来说两句