day08/下午/169-尚硅谷-尚融宝-上传组件的属性详解

好，那接下来呢，我们来看这个里面前端啊，前端这里面它是不是有一个on success呀，这个on success是什么呢？它是成功的回调，就是一旦刚才我们这个后端。刚才在这个位置，我们在控制台上看到上传成功了，那么我们就需要。执行这个成功回调以让用户啊，这个让这个开发人员可以加一段代码，叫做上传成功对吧？好，那之前我们这边这个写函数的时候呢，都是那种像事件似的，像这个艾特符号后面这个后面呢，才是还是跟函数的对不对，但是实际上呢，他不是说我们自己主动点击的事件啊，它是一个什么叫叫做像一个触发器似的，什么叫触发器，就是当这个uplo的成功之后，我要触发。这个事件，那么它并不是以事件的形式定义的，它是以类似于这样的冒号，冒号我们知道是数据绑定，它是以这种数据绑定的形式定义的，而以这种数据绑定的形式定义的这种属性，如果前面是冒号on杠的话，你可以把它理解为一个事件，就类似于at click或者是at什么什么，你可以把它理解为一个事件，为什么？因为这种前面加on杠前缀的，一般后面跟的都是一个函数类型的参数，我们看一下啊。

这个有点别扭哈，注意啊，这个叫属性是吧？属性里面呢，有个叫on success，它是一个函数类型的参数，那如果这是函数类型的参数，我们就管它叫回调函数，那在这里面也叫钩子函数啊，叫回调函数，所以呢，它就类似于事件这么一个东西，当某一件事发生的时候，它会自动的被调用，那这个呢，就是当文件上传成功的时候，这个钩子函数会被自动调用，所以这个地方我们定义的是一个函数叫W的success，当然这个函数是我们自己定义的，需要我们写在这个method里，好，这个函数的具体的内容我已经给大家写好了，它接收一个参数，这个参数是哪来的？在这个文档当中，它其实告诉我们他能接收仨参数啊，后面这俩参数我们用不上，我们就不管它了，而且也先不研究它了，我们就看第一个，从它的名字我们来看，它就是response对吧，就是响应啊，所以我们上传。

成功之后的响应对不对，返回到了这个response里面，然后那接下来呢，我们在这个地方就判断一下response的，如果响应码是零，那我们就说数据导入成功，如果响应码不是零，那我们就说数据导入失败。明白吧，啊，所以这是上传成功的回调，我们来试一下啊。好，然后呢，我们还是先把这个全都给他删掉。

好，然后接下来呢，我们重新来上传一下，刷一下吧。然后我们在这个地方呢，点导入点上传，然后在这个地方呢，点数据字典初始化数据点打开啊，然后你看数据导入成功。明白吧，啊，那在这个位置我们是不是展示了数据导入成功，并且把大log位置表就关掉了呀，这就是这样的一个流程啊，那现在数据库表里面是不是已经有数据了，你再往里导它这个ID冲突了，它不得失败吗？是吧？所以呢，接下来呢，我们在这个地方呢，再把这个导入再重新执行一下，点击上传，然后点击数据件出始化数据，点击打开，你看文件上传错误，因为这个port里面我们是不是返回负103了，这个叫文件上传错误啊，但是无论是成功还是错误，我们这面的HTTP的结果都是200。它是绿的，HTTP的结果都是200，只要HTTP的结果我们管这个叫通信成功啊，叫通信成功，但是通信成功的前提下，有可能有业务失败，有可能有刚才那个零成功，有业务成功，明白吧，所以我们远程调用有这几种情况啊，第一种情况就是通信成功，通信成功有业务成功或业务失败啊好，通信成功在我们这设计当中，其实就是HTP标准返回200。

这就是通信成功，业务成功呢，就是我们自己定义的，想要码扣的等于零，这个叫业务成功，业务失败呢，就是扣的不等于不等于零，这就叫业务失败，那么无论是业务成功也好，还是业务失败也好，他都是通信成功的，这是前提，明白吧，啊，那也有可能通信不成功，通信不成功的话，比如说404呀。

什么什么其他的405啊，什么这都是通信不成，反正不是200就通信不成功了，是不是，所以有通信不成功啊，好，所有的通信成功都在哪显示呢？都在这个地方，叫file upload success这个地方，你看我们主要判断的就是code等等于零，如果code等于零就导入成功，如果扣的不等于零就是导入失败，那就是刚才我们说的这个，这就是扣的不等于零的情况，对吧，所以刚才那个失败啊。再上传一下。刚才这个文件上传错误是在哪弹出来的呢？是在这个else弹出来的。明白这个意思吧，啊是这样弹出来的，假设说我们来一个通，刚才我们说的都是通信成功，我们来一个通信不成功的测试，什么叫通信不成功呢？就是比如说URL地址错了，对吧，通信肯定不成功。我们来试一下啊。

好，然后先把这个。先把数据给他清了吧。好，然后接下来呢，我们来界面导入，点击上传，点它打开，好大家看是不是没有弹出任何提示啊，也就是说根本就没有走我们刚才写的这段代码，因为这段代码不是if就else。都谈提示了，他啥提示也没谈，就是根本就没走，为什么没走，因为他这个通信是失败的，他不是200，他没有200，是不是他不是200啊，他没找到这个远程地址，那也就是说。这种情况怎么处理，这种情况在这儿处理。叫做on arrow，这个是处理通信失败，所以我们要加一个的error。那我们来看一下这这块的代码，就是有能力的同学可以自己写写，一般情况下还是不要求大家写啊，你就粘过来，你能理解就行，明白哈，好这块呢，就是通信失败啊，要写的是数据导入失败，我们来试一下，看看是不是弹出数据导入失败。

然后导入。大家看是不是展示了数据导入失败，所以那这样的话呢，我在我们的应用程序当中呢，是处理通信成功，通信失败，通信成功的基础上的业务成功，业务失败也可以理解吧，啊好，然后给大家写一下吧，通信成本就是通信失败啊，然后呢，这个叫业务成功好，这个呢叫业务时代好。这样就写好了，好最后一个。啊，不是最后一个啊，再来一个叫做on exceed an exceed呢，它也是一个函数类型的，所以也是勾函数fair upload exceed，这是什么意思，我们先粘过来。

嗯。这几个都是要求大家粘过来理解就可以啊好，这是上传多余一个文件，然后我们写的主要就是它叫fair upload ex，就它调用的就是它，这什么意思呢？就是它配合它来使用。这个limit的意思呢，就是每次你选你只能选一个文件啊，就是multiple的意思呢，就是每次不能多选，而且不能多选的基础上呢，每次只能选一个啊，然后如果要是这个是处的话，就可以多选啊，然后这块呢，就是可以一次性点击这个上传的时候一次性传两件，好，那这个呢，就是不但不能多选，而且一次性的只能传一个。好，然后接下来呢，我们来看一下，当超过一个文件的时候，自动触发这个方法，当你选择的文件超过一个的时候，自动触发这个方法，所以我们先来看这两个它怎么配合来使用，好自动触发这个方法的话，就弹出这个提示，叫只能选取一个文件，好，那接下来呢，我们在这个地方看一下。

到入哈。然后这块呢。我老是自动触发它的上传啊，我先不自动触发上传，就是这块有一个叫做out toload的first，因为嗯，这个地方如果是触的话是什么？就是我这面只要一点击，只要一点击这块它就成就传上去了，是不是假设说我呢，就是不想一点击就传上去，我想通过另一个按钮传，那我呢，就是点击完了先放着啊，它是这个意思，那如果点击完了先放着不传，大家看就是我呢先把它设置成first，咱们先来测一下这个。啊，把它设置成false的意思呢，就是啥呢？看下面这块我点导入，然后点上传后点数字典，你看下面有有请求吗？没有。

没有请求啊，没有请求，没有请求就意味着什么呀，未来你可以再做一个按，当点这个按钮的时候，然后再干嘛，再执行上传，而我们点这个按钮的时候，就先准备，你先把你要上传的文件先先选出来，然后点另一个按钮再传啊这个是刚才我们说的什么功能啊，就是这个false啊，如果你选true的话，那么就是什么呀，就是你只要一选它词就传上去了，这个意思哈，好，然后那我先给它改还是改成false啊，改成false之后呢，咱们来测这个LIMIT1这款。就是都是几个常见的属性，大家了解以后以后咱们再写其他的这个功能的时候呢，就都知道了啊常见的属性，然后选一下对吧，现在选了一个就下了，我再选一个。再选一个。

再选一个咱们白天写的这个，比如说点大家看只能选取一个文件。触发了谁呀？触发了他，触发了他。这个函数里面显示的就是只能选取一个文件，而且是方面形式的，好，为什么会触发它，是因为这个地方限制的只能选取一个文，如果我这个地方是二，那就能选两个了。所以大家看再刷新一下，然后这边呢，我导入点击上传，我选一个是吧，再选一个是可以选两个啊，然后再选一个他才出发，刚才这个。明白吧，选到第三个的时候它才出发，那当然了，这种情况你就应该把它改成什么呀，把它改成二了，对吧，只能选取两个文件哈，那这个我们再给它改回来啊，这是一个文件的情况，然后接下来呢，这个猫泡呢，就是一次性福利选多个，比如说我这边写true。

啊，然后这面呢，我们就导入选，然后就一次性按住CTRL，你看可以选多个，看见了吧，我一按CTRL是不是这些全都被选中了啊，所以这个是multi po的意思啊，下面这个就选了很多文件，然后接下来呢，就是如果这个是Bo的话，你就不能一次性选多个文件，你只能一次选一个文件。好，然后这块呢，你看我按住CTRL啊，按住CTRL诶选不了按住CTRL选不了按住shift是不是都选不了，只能选一个文件是这个意思啊好，那所以呢，在这个地方呢，就把常见的这几个属性啊，就顺便给大家介绍一下，当然咱们当前的这种场景呢，其实并不用，比如说这multi泡呢。都设置上严谨一点哈，好那就都设置上，但是实际上并不用非要设置个模泡哈，你选一个，你选两个，这它你在保存的时候，上传时候，它其实也传不上去，因为它就触发它了是吧，嗯，好，然后呢，所以呢，这块就是咱们整个的upload。

组件当中的所有的属性，所有的常见属性的一个详细的讲解，那未来咱们大家在做其他的upload的时候呢，要学会使用这个upload组件啊，要学会知道upload组件里面的每一个属性都是什么意思，刚开始做的时候呢，就建议大家如果不熟悉的话，就抄一抄，改一改。然后慢慢慢慢当你把它变成自己的时候，你可能就更能灵活了，所以今天的这个组件呢，可能对于大家来说呢，稍微复杂一点啊，但是实际上它的复杂点也就是属性多一点。嗯，到这为止呢，我们整个的这个文件上传就做完了，数据导入就做完了。