00:00
好,然后接下来呢,我们来看一下,这边呢,我们现在要整合的就是四个内容,一个是身份证人像面,一是身份证国徽面,一个是房产信息,一个是车辆信息,那这四个部分的内容呢,它实际上都是啊,很类似的,很很一致的这样的一个文件上传组件的这么一个调用,并且呢,也调用我们后端相同的接口,所以呢,他们四个内容呢,其实啊,我们可以看一看,能不能就是写一个通用的方法哈,然后呢,我们来看在我们的页面当中。啊,这面呢有一个啊呃,就是ello的啊,这个ello的呢,就是这四个组件啊,基本上都差不多的啊,都有一个ER的对不对啊,这里面也有一个幺的,好,然后接下来呢,我们来一个一个属性去给他解释一下啊啊首先呢,我们来看一下之前我们已经了解的这个属性,比如说on success和on remove,那这个呢,就是当上传成功时候的一个回调啊,这个就是要不要去同时选中。
01:09
多个文件,一个以上的文件啊,然后这个就是我们啊远程的文件上传的一个提交地址,那么这个F6的URL远程上传文件的提交地址呢,我们是把它,嗯。啊,这下面的啊。我们是把这个W的ul呢,定义在了刚才说的这个位置。这个位置对吧,所以提交地址呢,都是统一的啊,但是提交地址。它虽然统一,我们想让它提交到不同的目录当中啊,以示区分,那所以呢,你像后面这个地方,我们就追加了一个叫做data塔的这么一个属性,那这个属性呢,就是在我原有的这个啊远程接口调用的基础上,我又附加了什么样的一个啊参数过去啊,就是我本来呢,我是要调用这个地址的,然后但是呢,我在这个地址的这个调用的前提下呢,我又附加了这样的一个参数,比如咱们试一下啊limit,就是最多可以选几个文件是吧,这个咱们之前也讲过this type呢,就是啊这个文件上传组件的样式啊,那比如说我现在呢,把这个list type给它删掉。
02:35
好,你看这个文件上传组件第一个它就没有这样的一个像卡片似的这样的一个样式了啊,所以呢啊,我们在这个地方呢,要给它加一个list type啊,让这个文件上传组件呢,变成这种样子。是吧啊,我们之前的文件上传组件呢,际上是里面放了一个什么呀,放了一个按钮的啊,但是这回我们没有发按钮,放的是一个加号啊EL plus实际上这个是一个小图标,什么图标,加号图标啊,然后这个就是那个加号图标啊,然后这面呢,是修饰的样式,由谁来修饰的样式呢?由这个东西来修饰的样式啊,这个东西是uf的主定自带的一个属性,所以你把这个写上之后呢,它的样式自动就被修饰好了,还是挺方便的,所以现在呢,我们来看一下这个action和data塔之间的关系啊,好,然后呢,我们在这个地方先F12一下。
03:29
你看这块有这么多错误63个是吧,你先不用害怕啊,因为我们代码还没有写完,所以它出现这些错误呢,是很正常的啊,先把它清掉就行了,你要不想看的,然后呢,我们把它移植到network啊这个面板,然后我们选择。好选选什么呢?比如说我们选一个身份证的正面,然后呢,我们点打开啊,那它这个目前为止他传上去了,好,然后呢,我们来看一下这个的这块啊。M6的这块呢,就是文件上传成功,那因为呢,我们远程的这个接口呢,已经开发完毕了,所以呢,他当然一上传就成功了,对不对,而且呢,它有一个response response呢就是这个地址啊。
04:14
他上传到了这个地址当中去。然后我们来看一下是不是有这么一张图片,有它都能正常下载下来,就说明有,而且这块也正常回显了,就肯定有,对不对?好,那它这个图片上传到了什么路径下呢。嗯,我看一下啊。我们来看一下它这个图片上传的一个完整的路径,好这路径呢是这样的,前面呢就是我们的bucket name以及啊endpoint对吧的组合,然后这块呢,实际上就是我上传到了这个叫ID卡一的这个路径下,然后这面呢,就是我的这个日期路径还记得吧,然后这面呢,就是我的UUID加上扩展,好那关键点呢在这儿就是它为什么会直接上传到ID card的一的这个路径下呢?是不是原因是我们在接口端。
05:18
有一个啊,猫这么一个属性啊,然后呢,它是通过这个model属性,然后呢,在upload的时候。通过这个model属性,然后组装了这样的一个路径,对吧,然后再加上时间日期路径,然后再加上文件名,好是这样做的,所以呢,那一定是我们在前端给它传了这么一个model属性,那么我们在前端怎么传的model属性呢?大家看hi这块啊,这个是一个posts请求,然后呢,我们通过一个Mo丢等于ID card的一传过来的,好这是怎么传过来的,就是这样传的。就这样传的明白吧,通过这种方式呢,我们来区分一下,我们到底现在传的是身份证的正面ID card1,还是身份证的背面ID card2,还是房产信息?
06:14
House还是车辆信息卡?
我来说两句