00:00
下面呢,我们继续来完成讲师头像上传功能,刚才咱们把接口已经完成了,完成之后通过swa哥测试也成功了,那这个完成之后有一个小问题特别说明一下啊,之前说过啊,咱们别忘记在CTRL上面加上一个注解,就是C这个跨域注解,如果你不加上后面前在调用会有跨域问题,这个要特别注意,我现在把它加上。然后加上之后呢,咱们最后把前端完成整合,这前端我就不再敲遍了,咱直接复制,把每个代码咱们详细来看一遍,首先我们看到啊,第一部分在咱们讲师的表单页面中加上一个组件,就是上传组件,是由MUI中提供组件,那我现在把这个代码。复制到咱们的form.ve的页面中去,咱们来找一下啊,在这个页面中呢,有一个地方叫讲师头像,把这个部分我们直接做个替换,这里边我们看一下这个代码,大家看啊,首先第一部分。
01:08
E,然后它里边是否显示文件,咱无需要显示,加个主要是这里边啊,第一个叫就表示上传成功会调这个方法,这表示上传前调这条,比如你设置文件大小等等,然后失败调这方法这一行表示你上传接口的路径啊,咱们是这个路径,然后路径改成我们的路径,在路径中呢,我加了一个变量,这变量我写下边。咱们想这个位置啊,就是把它那个IP端口号,我们在下边做一个定义,也就是这个位置。比如说起个名字 local house8301取这个后面是你文件上传那个路径,从里面看一下ain vod file,然后加上upload的路径,就这个名字。
02:01
所以现在这部分完成,然后最后我们上传之后会显示讲师头像,用你们的标签做到咱要写的就是三个方法,上传成功,上传之前,还有上传失败,那三个方法我从里面复制,那我们来看一下这个方法,就是三个方法。给他拿过来啊,放到咱的methods里边,咱们看一下这几个方法啊。咱们一个一来看啊,首先大家看第一个上传成功调这个方法,在方法中我做了一个判断,如果说返回结果状态码200,呃,咱们看一下啊,我们状态码后面好像是改了,是不是2万呀,所以这个注意啊,需要改一下,如果你不改的话,后面肯定总提示错误啊,如果是2万,那咱们把法人数据不是给这个讲值头像,最终强制双新页面啊,这是WE1中一种方法,强制刷新页面,response.date是咱们接口返的数据,刚才接口中返回是不是你的路径,路径赋值为了显示。
03:05
然后第二是错误,当我们错误的话,咱们提示用户说上传失败,另外上传之前做个检验,那我说一下这个什么意思啊。首先第一行表示你文件类型,传个图片,然后是文件大小,这是是一个设置,另外如果它格式不对,大小也不对,咱做个提示,如果正确的话,再往下进行上传之前会调这个方法,这方法通过,然后上传成功调这方法失败调这方法,这个写的时候各位注意径别写错,然后这个方法给调用对就可以了啊注意径咱从。接口中直接复制就可以了,所以以上就是咱们完成的上传讲师头像的前端的整合,这个我们就做到了,做到之后最后呢,咱们把效果做个最终测试,看一下最后结果怎么样。咱来试一下啊,咱看里面特点。
04:02
比如现在我重新刷新,然后现在我点击按钮,咱们来上传头像。找到图片点打开我们来上传,上传之后我们看啊,在这个位置是不是有你的图片证明咱们就上传成功了,这个就可以了,包括啊大家注意我们之前在添加讲师的时候,咱们这里边那个头像位置应该都是等于,那现在我们上身之后,头像位置应该有值了,那咱们重新把这个讲式再加一个讲师。比如说随便写一个啊,这个讲师啊,起个名字,比如这个讲师名称,比如叫这个张无忌。入住时间,这个时间包括讲师简介,比如就来一个。张无忌啊,就要这个名字,最后有个头像点保存,咱们完成了添加,然后到表里边刷新看一下,大家看啊,张无忌一条数据中是不是有一个图片的路径,这咱们刚才拼接的路径,包括进行了返回,所以以上我们就完成这个功能。
05:09
整合腾讯云的对象存储服务,实现了讲师头像的上传。
我来说两句