00:00
啊，所以呢，你会发现这每一个不同的上传组件呢，它的不同的地方呢，第一就是在于啊传的这个参数，然后另外呢，这个地方，我们on success这个地方，实际上你会发现我呢也调用了不同的方法啊，那这个为什么要调用不同的方法呢？那现在呢，我们就来说明一下啊，首先呢，我们把这个不同的方法呢，先都给它创建出来啊，所以呢，啊我们就要创建这个on upload success ID card1。这款啊，然后呢，这个还是有一个二对吧。二啊，然后接下来呢，还有一个呢，就是有一个叫做success。House对吧，House了对吧，这边写啊，然后接下来呢，这块，嗯，下一个呢，我们就写。
01:10
看啊。所以呢，这是这四个方法。好，那这四个方法呢，分别就是传这四个内容的，然后传这四个内容呢，我们去调用什么呢？我们去调用相同的一个叫做on upload success的方法。调用这样的一个，呃，相同的on upload success方法，然后这个on upload success的这个方法呢，它实际上啊，是我们element。UI啊里面就是回调，你看一下我们这个回调。
02:02
直接访问安曼百度太慢了。好，然后接下来呢，我们来看组件，组件这块呢，我们就写up。好，然后在这个阿六的上传这块呢，我们来看一下它最终的这个。On success啊UN success这块呢，它是不是有两个参数啊，一个是response，一个是fair，还有一个参数呢，就是fair list啊，然后接下来呢，我们实际上呢，需要这个response，还需要这个file啊response里面我们需要拿到就是它是业务成功还是业务失败，不知道大家还记不记得之前我们那个啊，上传里面要判断一下啊，在哪个里面呢？就是SRBD面里面啊啊。在这个news里面，然后我们有一个上传的地方呢，是。嗯。
03:00
靠对吧，然后靠里面呢，数据字典吧，然后这里面咱们有上传，上传这块呢。我们也这个是上传成功的回调对吧？啊，这个上传成功的回调呢，是绑定到了这个success这个位置啊，然后接下来呢，这个里面不是有个response嘛，这个response我们要判断什么，是不是判断他业务是否成功啊，还是业务失败了，所以呢，这个就非常重要，我们呢必须得把它传递过来啊，那所以这个是第一个response在这面。我们呢，因为这个是注册给组建的那些方法，所以这块呢，我们要给他传递一个response过来，好传response之后呢，所有的这些方法我们都要调这个on upload success。所以这块呢，我们写this there on absolute success，然后呢，我们把response呢给他传过去，所有的这些都是这样的一个套路。
04:00
所以如果是这样的话呢，我们就知道这个response呢，在这个地方是不是就要定义出来，因为你在这个地方传它了，所以在这个地方呢，就得定义出来啊，然后在这个地方定义出来之后呢，我们就可以啊先去判断一下，就是它那个失败的情况了啊，比如说我们参考一下之前的这个代码。他就判断呢，如果就是不等零的话，那么就是业务失败了，对吧？啊所以呢，我就嗯，比如说嗯，如果等于零的话，那么就是业务成功了，对不对啊，所以呢，咱们就可以这样去写，把这个粘过来，然后放在这面，放在这面的话，那就是如果等于零，那就是业务成功啊，如果不等于零，那就是业务失败，对吧？好这样的一个一个套路，然后接下来呢，一旦业务成功了，我们要做什么呀？刚才说到了业务成功了之后呢，我们要把这个给它填充上，就是包它是类似的填充上，因为这个是什么，这个就是附件列表，好，我们要组装这个附件列表，整个提交到后台，提交到后台做什么呢？提交到后台在数据库当中，我们有两个表需要填充，一个是包表，就是把这个申请人的基本信息都填充进来，还有一个就是包attach表，把申请人他所。
05:25
提交的这样的一个附件信息都存到这个里面，然后包这个表里面有什么内容呢？啊，就是有一些比如说姓名，身份证号，手机，学历，是否结婚，行业，月收入对吧，这些基本信息，还款来源，联系人手机名称，联系人关系啊你看就是刚才表单里的内容，然后包二里面是什么呢？包尔touch里面呢，就是比如说啊借款人ID是哪个借款人的图片，然后图片的类型，这个类型呢，有这样几种。有这个ID card ID card2house对吧，这个没有二哈，还有这个房产房产证，还有车对吧？啊，所以这个就是我们啊。
06:10
当前的这个。啊，包尔touch以及包尔啊这样的两个数据库表，所以我们现在做这个啊用户信息的申请呢，最终就要提交这样两个数据，那很显然一个用户呢，它有很多附件，那所以这个数据提上来的时候呢，它应该是一个列表形式的啊，那所以我们在前端组合的时候呢，就把这两个数据呢，就组合组合到一起了，包二的其他信息肯定在包二里面，另外呢，还有一个包，它是类列表，所以现在呢，我们要组装的是什么呀？要组装的是这个borrow a test列表，那所以我们在这个位置。往下走啊，我们在这个位置业务成功了之后，我们就需要做什么呢，就需要把刚才咱们的那个啊。
07:02
这个文件信息以这个啊对象的形式存储到哪呢？存储到这个列表里面来啊，那要是这样的话呢，我们就写一下类似点包，点包它是类似对吧。就是填充啊。那就这么写吧。所以一旦上传成功了之后呢，我们就填充列表，填充列表我们需要填充哪些值呢？我们可以这样写。好，我们要填充的呢，就是。啊，一个是这个图片的。
08:03
图片的名字。就是啊，我们可以把它叫做图片的名字，这呢啊图片的名字，还有一个呢，就是图片的路径，还有一个呢，就是图片的类型。啊，把这几个填充上就可以了，那么这借款人的ID呢，回头我们从包里面就能拿到了，对不对，所以主要就是填充这三个值，因为要后台要填充这个数据嘛，所以呢，我们这三个纸，一个是图片的名字1IMAGE内，然后后面呢，我们会封装一个就是这样的一个数据对象，对吧？你看就根据它的这个名称来，一个是image name，一个是image u啊，一个是image type，我们把这个给它封装起来啊，Image name哪来呢？这图片的名字哪来呢？我们呢需要再传一个参数，这个参数是什么呢？大家看还是看刚才这个文档啊，就upload上传组件on success，第二个参数就是这个file，这个file里面呢，就包含了这个文件的一些原数据信息，包括文件名是什么，包括这个文件的大小，包括文件的啊，类型啊，都会在这个文件的原。
09:18
数据信息里面去了，所以我们还要把这个file呢也拿到，那拿到file的话呢，你必须得在直接注册给uplo的这个方法里面去拿，所以在这个地方呢，直接就能拿到了，这是一个回调参数啊，包括response，包括file都是回调参数，当它执行到这个方法的时候，它自动就把这个就填充好了，所以我们把这个file呢也都依次的传过来。好，这样的话呢，这就是。我们传fair啊，然后接下来呢，在这个地方呢，我们就有一个fair，明白哈，然后在这个地方呢，我们就可以从fair里面。去拿它的内膜，这个就是它自动注入的原数据啊文件的名字，然后呢，还有一个呢，就是。
10:09
Image，嗯，URL，也就是说我们现在呢，还要填充这个image ul这个数据啊，啊存到这个里面，然后image URL哪来呢？啊image URL呢，从response里面response.data.url因为我们做上传的时候看上传。啊，File controller做上传的时候，最终是不是返回给前端一个URL地址啊，所以就从这拿就行了啊，所以这是image URL，然后接下来呢，第三个就是还有一个叫做image type image type。当然这个T呢，我们给它改成大写，然后这面呢，Image type哪来的image type其实取决于你当前调用的是哪个方法，嗯，你看调用的是，那假设说我调用的是这个方法，那我就给这个地方传一个参数，我就说我的image type呢，就是ID card1。
11:14
这样写对不对，好，然后接下来呢，这面呢，就是ID card的二。然后再下来呢，这面呢，就是house对吧，House了啊house是吧，看这个啊，然后我这个笔记当中。我看一下啊。大家去给他改一下。这款是吧，好好啊，把它给它改正确了。这没问题哈，行，然后接下来呢，就是。看这款。然后呢，我就传这个car car。明白吧，啊，所以这块呢，是咱们这几个。
12:02
啊，不同的这个函数为什么要分别调用，其实最终就是为了要区分我前传的到底是哪个值，我当前传的到底是哪一张图片，把它们分类存放啊，因为你分类存放到时候显示的时候，它也会按照这个不同的类别啊去显示。啊，所以说这个是为什么咱们这边要创建四个不同的方法，就是因为后面的type类型不同，那当然了，这个地方我们就要传一个type过来。对吧，来接收这个卡啊，然后接下来呢，这面我们就是太了。这样的话呢，我们的这个文件上传列表呢，到这儿我们就给它填充上了啊，所以接下来呢，我们来看一看我们能不能在上传的过程当中呢，去填充这个文件上传列表，成功的填充这个文件上传列表，那当然了，现在我们其实刚才已经嗯，就是做了一个文件的上传了，然后但是呢，目前为止我们这个文件呢。
13:12
啊，是否被填充上了呢？先刷一下啊，看一看我们这个部分。He user包是吧，这部啊，应该是这部分啊。然后呢，这个就是我们需要填充的这个列表，明白吧，所以一会儿我们要查看这个包下面的包，它是类似是不是在我们每上传一个文件的时候，就得填充一个对象进来，如果是的话，那么我们这个文件上传的工作呢就初步完成，所以接下来呢，我们来先刷新一下这个页面。然后接下来呢，我们来关注一下刚才所说的这个文件列表，还是要找到它。
14:04
这面啊，然后接下来那么关注他啊，看看他的填充情况，然后所以呢，现在我来上传一张照片。上传这个身份证的正面。对，当他上传成功之后呢，正常情况下呢，我们这边呢，就被填充了一个纸和正面对吧？好，这是身份证的正面，好这个纸已经填充进来了，然后接下来呢，我们再来上传国徽面。这是反面啊，驳回面，好等他上传，你看是不是又有一个值被填充进来了，所以这个呢，是我们上传的反面啊，这个是我们上传的正面，好，然后我们再上传一个房产信息。好哈，这个名字我来改一下。
15:06
其实这个名字倒无所谓啊，就是看起来。还是改一下比较好。好，大家看这第三个是不是也已经填充进来了啊，然后我们image type是house是吧，Image name还有image，这给它改回来，然后接下来呢，第四个车辆信息。好，这第四个传的还比较快啊好，那这个就是第四个我们的car JPG卡，那这个就是我们整个的一个数据填充了，那么大家想当我们再把其他的部分的内容。啊，都给它这个处理好之后，是不是我们整个borrow这个对象就组装完毕了啊，当我们的对象组装完毕之后，紧接着我们在这个地方点击把提交按钮的时候，向后台提交一个信息，就提交什么呀，就把这个对象提交上去就行了，然后后台呢，拿到这个对象之后，是不是就可以把这个对象当中的啊基本信息的部分存在哪个表里，存在borrow表里，然后把刚才我们填充的这个borrow list对吧？Borrow touch list做便利，然后便利的过程当中呢，把它们依次存到哪里，存到这个borrow touch这个表里，这样的话就我们这个信息就提交上来了，就存到数据库当中，所以刚才前端这块实际上比较复杂的部分就是什么呀，就是我们如何去理解这五个方法啊，他们的这样的一个调用关系，然后为什么这边要写四个方法啊，分别去调用一下这个on uploading success，实际上我们最主要的目的。
16:52
就是把这个文件的类型区分开啊，是这样的，然后呢，做这样的一个类似的一个填充，所以希望大家这块能够了解啊，然后接下来最后呢，我们来把这个它的。
17:07
文件上传组件。文件上传组件这块的UN remove这个方法呢，直接给它实现出来就行了，那这个咱们就不啰嗦了啊嗯，我直接呢就把它。先沾一下这款。先存一下这个视频。
我来说两句