00:00
大家好,那这节课呢,我们来写一下个人中心的一个头像上传啊,那我先登录一下。啊,那头像上传,我们希望点击头像的时候,诶,触发一个文件选择的这个框,然后选择完图片之后自动上传,并且完成数据库的一个更新,啊这是我们头像上传的这个逻辑,那首先我们来找一下上传组件,在这里直接收啊。啊,那这个就是呃,有view提供的上传组件,它也是对UNAPP的一个封装,其实啊,UNAPP的上传组件的一个封装啊,那这个上传组件呢啊,我们使用。找一个例子啊,找一个例子。那我们一定要看嘛,他没有完整的例子,那我们首先来复制这个东西啊。找到我们的代码。
01:00
找到个人中心头像这里啊,我们把这个头像啊,这个区域换成哎,我们的上传组件啊,换成我们的上传组件,然后啊,我们来想一个问题啊,因为这个上传的话,它可能会有很多地方会用到,对吧?那所以呢,我们不要直接在这里面去写上传啊,我们在这个组件里面去写,然后去引入这个组件啊,那我这里呢,我就不现在这写完给大家再再拆成组件,我直件啊把把组件给拆分出来啊,我们新建一个组件啊。叫upload upload啊,我们加一个前缀版叫oss upload,因为我们的上传的内容是上传到了oss啊,这个云存储上面啊。嗯,这个创建错了啊,我们先把它删掉,因为我们要创建一个同名的目录,这样才符合这个。com规范来新建一个组件。把这个同名目录选项勾上来,我们这一个oss啊upload好,那接下来呢,啊,把我们的诶上传的组件代码就写到这里面来找一下文档复制一下这个东西,好,那这个view就不要了,你就留着一个上传组件就可以,呃,接下来对他的属性换下行,因为等会儿我们要给它配置很多属性了。
02:17
很多。这个帕。好,我们来看一下这个上传组件啊。呃,上传组件一般它都会有一个呃,Action就是我们上传文件的一个地址啊,会有一个这个list,我们要上传的一个文件,但是我们呃这个上传呢,有点有点特殊啊,我们使用的是。呃,Oss,也就说我们的文件最终是上传到了阿里云的这个oss上面,那我们上传到oss呢,就需要talking,所以我们需要请求一个API拿到这个talking啊啊talking,那他不仅给我们上传的这个talking,还有我们要上传的这个域名啊,那这个action呢,就是配置上来服务端返回我们的域名啊,那简单的给大家呃,画一个图啊,辅助下理解,也就是说我们的这个上传啊,是上传到了这个阿里云的这个oss啊。
03:05
我给大家画一下啊,那这是oss好,呃,这是我们的这个。这是我们的这个API服务器。API,这是我们的API服务器啊,那我简单给大家画一下这个呃流程,这是我们的客户端啊,啊可那因为我们想要把这个文件,就是用户的这个客户端文件上传到oss对吧,但是他是没有权限的,所以呢,我们客户端啊,要先去请求我们的API去拿到一个talking,那客户端啊,就是说把talking还有上传的域名啊,就下面这个啊,绿色这些东西返回给客户端之后,客户端带上这些签名啊,带上这个文件啊。去请求OS就能把文件给上传上去啊,就是feel加上啊这个啊,我就简简写成talking,它实际上是有这个签名,有sing,有这个策略啊,有这个这个sidd等等等等啊啊那这样的话,这个文件就有权限去上传到oss啊,最后呢,我们实际上啊客户端啊,提交给API,我们存储的就是一个文件的K就可以了啊,因为在服务端会处理会呃,根据这个oss去生成文件的完整的这个地址。
04:11
啊,这是整个我们的上传的流程,那把这个流程清楚了之后呢,哎,就开始写我们这个上传啊。好,呃,首先我们来看一下我们这个上传组件,有一些我们要配置的一些属性啊,呃,建议大家呢,整个都看一遍,整个都看一遍啊那。呃,因为我已经看过了,所以呢,我们就把这个重要的给说给说一下吧,过一下吧,啊,首先是这个一个这个基本的一个使用啊,然后这是这个上传的这个地址,上传地址呢,我们肯定是需要的,我们把这个属性给配置上啊,当然我们的地址肯定不是这个我们的上传地址,应该是刚才我给大家演示的从API返回的这个地址清楚了吧,所以这个地址我们要从要从这个请求这个API以后啊去获取到这个地址才行。啊,但是这个这个参数是需要的,所以我们先把它给配置上,那接下来继续看啊,Feel list这个我们用不着啊。
05:05
啊,因为我们这个头像嘛,它是单文件上传,你根本就用不着这个例子的,我们选择完文件直接上传就完事了。继续往下看啊,下面是配置这个手动上传啊,那把这个凹凸upload改改成for就可以手动传,那这个我们不用配,我们就是要自动上传。获取上传的这个图片列表啊,这个我们也暂时不需要这个上传的这个图片列表呢,我给大家演示一下就是这个东西啊。我们来找一个图片啊,图片。找一下这个啊头像啊头像好我们来选择一下啊,那这两个呢,这个就是我们上传的这个图片列表清楚了吧?啊,那我们是呃各一个头像上传,所以暂时也不需要接着找下面的啊报错的一个提示,嗯,这个它呃默认就可以啊这个我们先不用管,然后图片的数量和大小。这个我们再配置一下。这两个是需要的。
06:01
啊,我们碰到哪个需要的属性就给加一下就可以了啊,那大小呢啊,它的这个是字节啊字节啊到这儿呢是K啊到这儿呢是百兆,就是五兆,五兆就可以那数量上传一个。上传前的钩子啊,上传前的钩子就是我们在选择完图片,图片还没有上传之前那些钩子,我们可以在这个钩子函数里面去修改这个文件名,增加一些额外的上传参数等等,这个是非常有用的啊。好,那我们把这个给加上。把这一加上就发不的,同样我们把这个函数给写上啊,这里没有method,我们写一个method。上船前的钩子,上船前的钩子这个钱啊,接下来啊,这块我们再来看一下。
07:10
哦,这个他这写的有,那我们直接复制吧,因为我们确实是需要这个,呃,两个参数,一个是当前文件的一个索引,一个是文件的一个列表,一个是类似的。好,那这个人就直接复制。嗯,下面的就不看了,就是我们这个上传前的函数可以去给它返回不同的值啊,那其实最终我们只要返回处,它就会继续进行上传。啊,所以呢,这个地方我们就啊返回处就可以了啊,也不用做判断,先这样,等会我们会自己写一些判断,自己写判断啊移除前的钩子,移除前的钩子呢是呃,移除的时候啊,移除之前它会做一些判断啊,就这样移除的时候啊,这个呢,我们这里头像是不需要移除的,所以这个我们也不要。嗯,自定义内部的样式啊,我们可以自定义去,呃,修改它这个图片的一个显示啊,包括他提供的这个lo,可以我们自己自定义这个上传的按钮,比如说这个啊这里。
08:11
啊。那自定义样式改成是,那这个是它自定义的一个样式,好,这个我们也暂时不需要啊。接着往下看。好,那我们就看API吧,把API过一遍,需要的话我们就给它加上啊,因为前面的例子不一定举得完全,嗯,首先是这个action肯定是要的,肯定要的啊,这个也要我们配置完了啊,预览区域的宽度啊,这个呢,我们先。不用管他,不用管他。还有这hi宾馆,因为我们这个肯定是不要的,这整个内容区域我们肯定要用这个lo插槽给替换掉的啊,替换成我们的这个我们的这个头像的,明白了吧,所以这个肯定是不要的。来继续往下看啊,如果需要自定义图片按钮,把它改成出,那这个我们是要的,因为我们是要自定义这个上传按钮的啊,来把它删掉,先删掉,比如说我们需要自定义这个按钮啊,所以我们把它改成除。
09:17
加个冒号。那那接着往下看啊。是否显示进度条?啊,不要不显示进度条,就是上传的时候接着啊是否启用隐藏组件,这个不这个肯定要启用啊,啊图片的裁剪模式,这个不用管图信息啊,上传的这个额外的图信息,那这个呢。嗯,我们先先不用管那个封队的上传携带的额外参数,这个我们需要,因为我们向oss去上传这个文件的时候,那这些啊,就是这些参数是在哪带着的呢?就是在这个form data里面啊,同文件一块通过表单就传递过去的啊,我们走的是这个SSS的一个啊,Post field那个那个接口啊,所以这个我们需要form date啊,等于。
10:12
那这个我们得定义一个呃,变量用来其实我们分闭的,这就是表单数据啊,我们的文件呀,还有额外的信息都会在这里面,在这里面定一个,当然一开始呢,是一个通对象啊,什么都不用给,接着再往下看啊,上传文件的字段名,诶这个默认就可以,哎,Free feel就是后端怎么去取得这个上传这文件feel就可以了。好,还有这个图片的类型,图片的来源,这些不用管。嗯,这个是否全屏预览,全屏预览呢,就是我们可以去,呃,点击这个图片啊,查看这个全屏的这个预览。啊,这个开不开都行啊,默认呢,就是开着的。先这样吧,如果有问题,我们再再给它关掉啊,再给它关掉。
11:01
接着是否开启多图多选啊,这个我们应该是改过了吧,啊,没有,我们把这个给它改成for。不让他多想。不让他多选,接着来看啊。是否显示删除按钮,不显示的这块我们不需要,因为我们这个直接选择头像上传就行。最大文件大小写了,然后这个呃,Few list我暂时啊不需要,就是显示默认成为内啊,这些也不需要。自动上传默认就开启着呢啊。然后这些,呃,应该是都配置完了啊。还有一个属性是。呃,修up list是否显示组件内部的图片预览啊,这个我们不需要。不需要。嗯,诶,应该是需要显示这个预览的,你把它改成处啊,不显示这个内部的预览的话,那我们上传完之后啊,看不到这个预览图啊啊。
12:13
我们先写这么多啊,先写这么多啊,因为有些可能也写的不对,具体我们根据我们的调试再来啊,那接下来我们要引用这个组件对吧?好在这个地方来引用我们自己写的oss漏啊接下来那这个东西怎么办呢?这个东西啊。我们应该作为插槽在这个里面给它来实现,我们来看看这个组件的这个插槽啊。它有一个ADD button自定义图片按钮的一个插槽啊,也就是说我们这里面啊,可以写一个ADD button的一个插槽,那我把这个东西啊,这个东西就放到它里面写一个lo,让它实现它的插槽啊,实现这个at巴这个插槽。哎,这样的话,它原来的就是这个加号就会变成了我们这里的这个东西,明白吧,好,我们来看一看效果。
13:09
啊,Few list is not,那就说这个方法没有定义啊,我们的这个feel list。啊,这个呢,其实我们,呃。应该是用不到,应该是用不到。想一想,好像是用不到,先先删掉。可以看到我们的图片是有的,对吧,那我们点击也是能上传的,对不对,那我们选择完之后啊,啊,因为上传失败,然后所以呢,我们这里会显示一个点击重试,再一个我们选择完图片之后,它这个显示的这个效果是不对的。看到了吧。那我们应该。怎么办呢?哎,把它这个上传选择图片显示的这个预览的这个效果样式,给他调一调,调一调。啊,那这个样式怎么调呢?哎,我们虽然可以哎定位到它的样式,然后给它进行调整,但是啊,我一般在用这个组件的时候呢,我是不会去用这个啊预览的啊,因为你。
14:06
就是当这个它的主要一个一个坑的地方,就是说当他上传的啊列表里面有这个文件的时候,你就不能再次点进去上传了,再点的话就是预览,所以我一般会选择把这个预览给禁掉啊,那其实进展上呢,也非常简单啊。之前我们看这个属性里面是不是有一个宽高的一个属性,对不对,就是看预览区域啊,预览区域的宽高。啊,那我们把它给成零,那这样的话预览区是不是就没了,就看不见了,对吧?好,我们来调整一下啊,Y等于零,再给一个has等于零。啊,那这时候我们再来试一下啊,那等我选择完图片,诶,因为它是零,所以呢这块就没了,但这样明显样式可能会出现一些问题啊,所以呢,我们呃,一般可以给这个它的这个外面啊去包裹一个view啊,然后让这个view呢去。
15:06
呃,给他写一些宽高,防止他去。看看啊。嗯,我们最外层已经有一层view了是吧,那我们就给最外层那个view加一些样式就可以了啊,它的最外层的V6是。这个啊,这个。嗯,应该是这个,那我们其实啊,应该是给上一个这个东西的。好,应该是这个啊,我们给上一个宽高啊,来粘贴好,这样的话我们再去上传试一下。诶,它就不会出现问题了啊,虽然现在上传失败,当我们上传成功的时候,就可以立马把图片显示到这里清楚了吧?啊好,那我们先把这个宽高给它加一下啊。高度70,宽度70。你数数这个。
16:01
好,我们来加一个va体啊,搞这个好,加上这么一个就可以了。写在上面啊,这AAAOK,给他一个宽高。好,我们来刷新试一下。好,这样就没有问题了啊,那接下来呢,那我们。就继续写这个上传的这个功能,那我们这小节先到这里,在下节课我们来写这个上传的这个功能。
我来说两句