day08/下午/168-尚硅谷-尚融宝-前端文件上传组件的整合

好，我们打开的这个对话框里面呢，实际上是一个表单，再加上一个取消按钮，取消按钮不用说就是一个1BUTTON，然后当我们1CLICK它的时候呢，就把这个dialogue就给它隐藏起来，所以呢，在这个地方我们点击取消dialo就消失啊，点击导入alo就打开，同时点击这个叉来给消失啊，就这样的一个功能，好，这是这个取消按钮，然后接下来呢，上面这个e form里面呢，它只有一个e form item。这个e form item里面呢，有一个EL upload啊，这个EL upload呢，它就是一个文件上传组件了，好，这文件上传组件呢，在我们的element UI这个里面呢，也能够找到啊，就叫做EL。Uplo。啊，不漏的哈。这找不太好找，我一般都是CTRLF在这找，这样搜快。

还是说？还是上传反是吧，啊，这样找好ER的好，这个就是一个上传组件了，这上传组件呢，各种各样的形式吧，反正大家有兴趣的话可以看一看，能够上传文件，能够上传头像，能够上传照片墙，就一大排可以上传一堆啊啊可以上传文件缩略图，还有列表缩略图等等等等啊这块呢我们就不一一的去介绍了，我们呢直接呢就看我们现在的这个uplo的组件，它都有什么就可以了，我们现在这uplo的组件呢，可以说是最简单的1UPLO的组件了，在这个地方呢，它就展示这么一个文件上传按钮啊，选择完文件之后自动上传啊好，那么这个erf load里面呢，有这样的一些参数。我先从最长的这个参数来开始说，这个最长参数呢，就是它接收什么样的文件类型，我们说呢，我们这个要接收Excel文件类型啊，我要接收Excel文件类型的话呢，那你看在这个地方，我就点击导入，点击上传，我这个第二部分这个目录里面啊，其实我有很多很多文件。

这里面其实有很多文件，包括PDF文件，包括Z压缩文件，包括搜文件，包括XLXX文件，但是我们在这个应用程序里面呢，其实就只接收X，就是这个Excel文件，我们不想接收别的数据类型的文件，那你在这个地方呢，就。就通过看。就通过这个。和这个来定义，我只接收Excel类型的文件，那么这个Excel类型的文件这两个是两种文件类型啊，这两种文件类型的一个是XLS的，一个是XLS的，我就把这都写到这了，但是实际上我们的程序当中，我们在处理这个文件导入的时候，我们没有去特意的去指定它是哪种，没有特意指定它是哪种的时候，就是这个。

四个字符的这个扩展名，所以你看之前我们写的这个例子，如果我指定了数据类型的话啊，文件类型的话，那么就是这个XLS的，如果我上面不指定这个文件类型的话，那么它就是XLSX，明白吧？所以在我们的应用程序当中，刚才我们做导入的时候，我们并没有指定是什么文件类型，那实际上就意味着我们要选的应该是XLSX文件，对吧？若是这样的话呢，在这个位置我们就只保留前面这个就可以了。就只保留它就可以了。那我们来看一下今天。刷新啊。然后导入上传，大家看这个地方它是不是啊，这个是三个字符的啊好，那在这个地方它是不是只接收三个字符的扩展名的这样的一个，呃，Excel文件的，那刚才咱们那个是四个字符扩展名，它是不是就选不了了啊同样。

在这个地方，如果你写后面这个的话。他俩写法有点差距挺大哈，但是确实就是这样写的啊，这个四个字符的扩展名的那个Excel文件我们在写，这这不用大家记啊，这也是在网上搜的，所以你就直接把它粘回去就行了，然后这块我们打开。点击上传，大家看现在是不是只接收这个XLXX类型的文件，然后这块是不是就能选它了，明白这个意思吧，啊，那你如果想接收多种数据类型，那你就把这多种数据类型干嘛呀，用逗号分开啊，然后都以列表的形式就列到这个accept这个属性里面就可以了，那这样的话呢，我们在这边再点击上传的时候呢，它就这两种文件类型都接受，明白吧，所以呢，这意思就是只能选择Excel文件啊好，这块我们说的是accept。这个属性，然后说完accept这个属性呢，我们再来说一下这个name这个属性，Name这个属性是什么呢？就是我们在做后台接口的时候。

在这个位置接口这个位置啊，这个接收上传这个数据的file这个对象的时候，是不是写了一个request perter等于啊，意味着我前端的，呃，这个组件的名字必须叫file，我后端的才能接收过来，所以呢，这面就是给前端组件命名的，这面的名字一定要和后端的这个名字保持一致才可以。明不明白，好，然后接下来呢，就是action这个地方，Action这个地方呢，就是后端接口的地址啊好，那所以action这个地方呢，我们刚才我后端接口的地址是什么呢？是不是叫a Thein car import呀，啊所以呢，我后端接口的地址就是a Thein car inport，当然了还得加上前缀，前缀就是那个local host local host从哪来呢？我们在这地方定义一下啊，怎么定义呢？我们看一下。

这样去写一下。直接写在他后面。好，从环境变量当中拿，而这种写法的环境变量实际上是一个固定的写法，它就是从哪拿，就是从这个地方拿。就是从这个地方拿啊要viewpi base view base API，所以这块呢，就view APP base API是吧，这种就是从环境变量当中拿这个纸，所以就相当于把这个落克后色怎么样，是不是就追加到了。这个呃，或者说定义到了这个base API这块，然后我们base斯API这是不是就和后面这个字符串连接起来，形成一个完整的API地址啊，好，那么这个action它会以阿贾克斯的形式呢，向后台发起远程调用，但是这里面的阿贾克斯和我们系统当中的这个。

X啊，没有关系，我们这系统不是有一个request嘛，对吧，这个不是封装了我们的X对象嘛，然后这个X对象里面是不是已经定义了face API啊，所以这个地方的这个远程的这个地址啊，和我们这个地方里面也有关系，它呢并没有去调用我们封装的那个X，它是这个element UI内部的一个阿贾克斯方式进行的一个远程提交，所以呢，我们这边必须得把完整的URL地址写上啊，再再强调一遍，和这边没有关系，同样他也没有请求拦截器，也没有响应拦截器啊，所以这面的这个上传我们的请求和响应，如果需要拦截处理的话，那是需要单独处理的，好单独处理在哪处理，就在这些地方处理。

这个比如说这个是响应来响应这个回调啊，这个是响应错误回调，对吧，因为我们之前的那个错误信息是不是得在得在拦截器里面处理了，就一旦有响应失败的话，那么是不是拦截器里面处理了这个响应失败，失败不是在这里面，呃呃，真的啊，失败不是在在这个地方嘛，处理的嘛，然后最后又走到HTP失代，失败的时候不是在这处理嘛，那所以呢，我们这个地方它和我们的啊那个request GS既然没有关系，我们就自己处理成功和失败啊等等的情况，所以这块是action啊，同时呢，也是on success和on error这两个值啊，它们所对应的这样的一个数据的一个。一个一个内容，然后我们再回头看一下这个，呃艾啊这块看看是不是他执行的上传，在这个地方刷新一下啊F12，然后我们在这个地方呢，点击network啊，然后点击导入，点击上传，然后点击这个输入下数据啊，然后点击打开，大家注意看这个控制台这块的这个远程请求啊，看这个地方，然后点击打开，大家看这块是不是有一个远程接口比较用了，而这个远程接口是不是就是咱们刚才的这个接口。

对吧，就是刚才的这个接口啊好，我们刚才在18根里测的这个接口，它为什么错了呢？因为数据冲突了呀，我们都传上传上过一次了，是不是你再想传的话，你就得干嘛，你就把这个数据删了，你传啊所以呢。在这边呢，我把这个数据呢，先都给它删掉。好删掉，删掉之后呢，在这面呢，我们就点击文件上传。然后呢，选择这个文件。好，我看一下啊。等一下重来一遍啊，应该是传上去。

传上去了，看一下传没传上来，传上来我再试一下啊，点击点击这个导入Excel页面重新刷一遍。然后点击导入Excel，然后点击上传，然后点击输输入下数据，注意点击打开，好大家看这面是不是就执行完毕了，这位执行完毕之后是不是就展示数据字典批量导入成功了。好，这地方既然展示数据字典批量导入成功了，那你看数据库里面有没有数据，是不是有数据了，所以这样的话，前端啊，我们的导入的整合就做完了，但是导入整合你做完不行，你你你这样是因为这个我们是在控制台上看到的结果，实际上用户看到的是这样的。对于用户来说，这是没有反应的，对吧，我们得上传成功之后，得给用户弹出一个提示，说批量导入成功，然后自动把这对话框关上就可以了，并且呢，如果这块有列表的话，还得自动把这个数据列表在这个页面上展示出来，这些都是后续的操作，明白吧？啊，所以现在我们传是传上去了，但是得做其中的第一个后续操作呢，就是导入完了之后啊，导入完了之后呢，咱们要咱们要把这个对话框关上，然后提示用户导入成功，要做这样的一件事情。