day15/上午/298-尚硅谷-尚融宝-附件删除的实现

啊，然后刚才我们呢，做的是一个文件上传啊，文件上传的过程当中呢，咱们组装数据，接下来呢，我们来看这个文件删除，我们把鼠标放在上面呢，有一个删除按钮，我们希望一点击这个删除按钮呢，就执行一个文件删除，删除那倒是好做，因为你一点删除，它其实自动呢，就是一个删除了，它自动就删掉了，但是呢，我们这个删除呢，它只是组件给我们提供了一个默认的功能，它只是效果上呢，从这个页面当中把这个图片呢，让它消失不见了，但是你会发现你们组装的数据里面这个图片还是在的，那我们的删除要做到什么呢？第一就是页面当中它不见啊，就是组件自带的功能，第二数据这块我们也要把它。给它清掉啊，因为你这个数据不清的话，一会儿你一点提交这还是四张图片对不对，真正提交的是这个数据这块啊，就是这样，然后另外呢，如果我们删除了之后呢，我们希望呢，在阿里云上这个文件也删除，那所以呢，我们需要调用我们的后端的一个文件删除的一个。

接口啊，那这样的话呢，就真正做到了这几端同步，阿里云，阿里云端，然后后端啊，以及我们的前端都同步啊，所以那我们就要去啊，去实现这样的一个文件删除的方法，那所以那我们来看一下我们前端的代码，在这个地方呢，我们写了一个on upload remove，所以呢，我们要把这个on upload remove呢做一个实现啊在这个位置。就是删除好，我先写一个日志，看一看能不能过来啊，删除的话咱们要做什么呢。咱们呢，实际上是要。啊，先调用这个远程的。

删除接口，这是第一件事情，第二件事情呢，就是从我们刚才的这个包，它是类似列表当中删除这个对象，对吧。好，然后所以接下来呢，第一件事情，我们先调用这个远程的删除接口，那么就是this.dollar然后点Dollar delete，然后我们看一下我们远程的这个方法啊，叫做delete方法，所以就是Dollar delete，然后接下来呢，它的URL地址是什么呢？是apis。

那这边呢，我们写apis对吧，然后接下来呢。还是接口这面我们在写木。Remove啊，然后在接下来呢，就是在接口这面呢，我们还是需要传一个URL过来的，那么这个URL呢，我们是通过request perter过来的，所以呢，它是通过URL地址直接传过来就可以了，那是通过问号啊，就是查询字符串的形式传过来就可了，那这面呢，我们可以这样传问号URL等于。然后呢，加上那么这个URL从哪来呢？从我们的。这个lo的remove大家看啊。找一下这个。An UN upload。搜一下那个事件叫。

叫阿瑞木时间对不对，我们搜一下这个阿瑞木时间啊。好，然后上这里。这呢哈阿瑞木事件，然后呢是文件。列表移除时的钩子，它这个安瑞莫事件呢，只有两个参数，一个是file，一个是fair list。所以呢，我们可以把这个file和file类先放过来，看看有没有用啊。好，拿回来之后你们要干什么呢？其实我们就是想想办法拿到呃，当前这个文件的那个URL地址，因为我们后台在做删除的时候呢，是需要一个URL的，但是在当前的这个场景下呢，我们怎么能获取到当前文件的URL地址呢？我们不知道，我们知道的呢，就是这个onlo的remove方法呢，它有两个自动注入进来的参数，那我们现在呢，就可以想一想，能不能从这两个自动注入进来的参数当中呢，获取到一些有效的信息啊，所以呢，我们在这个地方呢，先打印一下这个fair以及这个fair list看一看哈，所以这面呢，是它的fair啊。

就是有的时候我们在写代码的时候，可能并不能马上知道这个代码的思路在哪，但是我们可以通过已知的有效信息去寻找一下，所以现在我们已知的有效信息呢，就是这个回调函数的两个回调参数，看一看回调参数里面有没有什么内容可以供我们去使用。所以呢，在这面。我们呢，就是还是试着上传一个文件，然后再试着删一下它。啊，我希望还是能监控一下他，然后所以正面呢是正面。

好，这边就上传上去了，上传上去之后呢，我们来看一下删除这面啊删除这面呢，我们刚才是在这面控制台这边打印了一些内容的，然后我们点击删除，好，那这样的话，On upload remove这个函数当中的file参数，还有file list参数呢，就在这个地方被打印出来了，我们来看一下我们的这个file参数，把它展开。里面呢，有一个response好，Response里面好像正好是咱们刚才上传过程当中的想它在删除的方法当中，他给他封装到了file这个对象里，那这个是组建自己做的事情，他这样做的目的就是为了防止我们在删除的过程当中，想去回头去取一下上次上传过程当中的那个响应信息，所以他这个考虑的还是比较周全的，是不是啊说明呢，这个。

这个组件啊，做的还是比较好的啊，做的这个功能还是比较齐全的，所以呢，我们是能够通过我们当前的这个file对象拿到response对象，继而拿到我们需要的文件的完整的URL地址呢，所以那如果是这样的话呢，我们就来看一下在这个位置我们的URL这一块，就可以从fair当中拿fair.race bo.data.ul。啊，所以拿到之后呢，我们其实就可以执行一个远程删除了，然后接下来呢，就是点问就可以了，这面呢是类似好，然后接下来呢，在。这个位置呢，我们就执行一个就是远程删除成功了嘛，啊，那我在这块。

我来写一下吧，叫远程删除成功对吧，这样的话，这文件呢，就从我们的呃，阿里云当中呢，就被成功的删除掉了啊好，然后删除掉之后我们要做什么呢？删除掉之后呢，我们要做的就是从我们的列表当中，就是从这个列表当中啊。把我们的当前的这个文件呢，给它删掉啊，从列表当中，把当前已经加载到列表当中的文件啊给它删掉，那么这个删除的方法呢，我们可以这样写，就是javascript有一个filter方法，第点。borrow.borrow attach list，然后点filter好，然后接下来呢，它这个里面呢，接收一个函数类型的参数，我们可以写线头函数，也可以写方式，然后呢，这个函数类型的参数里面呢，它有一个item啊，这个em呢，就是当前被遍历到的这个attach类，因为这个它类里面可能有啊多个文件对不对，有身份证正反房产等等车辆，好，那么我们便利其中的一个啊，当这个文件的image URL。

当这个文件的ul恰好等于我们要删的这个文件的URL的时候，就是这个文件的U的时候，我们呢，就他俩如果恰好相等的话，那我们就干嘛呢，我们就。想把它给踢掉，也就是说当他俩或者是说当他俩恰好相等的话，不就正好是我们要删的这个文件嘛啊，如果这个是我们要删的这个文件的话，那么我们就想把它从数据列表当中给它移除掉，对不对啊，那么这个函数是什么意思呢？这个函数就是如果return true的话。

那我当前的这个。对象就保留在这个列表里，如果你想把当前的这个对象从这个列表里移除掉，那么你就要return for啊，所以呢，在这个地方呢，我们就判断一个相反的值，就是正好，如果它俩不等的话，那么我就return出对吧，相等的话我就return false，明白这意思吧，相等的话我就把它移除掉，从列表当中如果不等的话，那么我就return true啊，所以如果它俩不等，那么它不等于它不就是个处吗？如果是处的话，不就返回了吗？返回的话，当前的这个不就留在列表里了吗？啊所以这个呢，就是我们做了一个过滤，好，那这个方法呢，是会把当前的这个列表按照这个规则对每一个选项做判断，判断完了之后过滤，过滤出来的结果呢，我们再把它回填回来，这样的话，整个这个列表就是过滤后的。

这么一个列表啊，所以这块呢，是我们当前的这个业务逻辑啊，不知道大家能不能听明白啊，如果有疑问的话，建议大家在课下的时候呢，先把这个方法呢好好试一试是不是好，然后接下来呢，我们来看一下，在这个地方我们呢就来执行一下刚才的。啊，我们写的这个代码看一看呢，是不是能够达到我们的效果啊。嗯，我在这个地方呢，上传一下。正面？当然了，我要看的是正面啊。

好，这是一个文件，然后再上传。啊，这是两个文件哈，咱们都上传一下。然后呢，这个是house这三个文件，然后接下来呢，再上传这看这四个文件哈，这四个文件呢，首先我先确保他们确实已经加载到了我们的这个列表里面，然后接下来呢，我再来访问一下阿里云，看一看他是不是已经上传到阿里云当中。

然后呢，我们选择oss。好在咱们这个文件里面呢，咱们看一下，比如说我先看最后一个那个看哈，点一下202103。今天是零六号是吧，然后呢，嗯，10:18吧，这个应该是刚才咱们最后传的这个文件啊，10:18好这个文件所以呢就已经上传上去了，好那其他的这个文件我就不一一查看了，好那现在我就删除这个文件啊，删除的话在哪删除呢？在这个位置。

在这个位置，我先把这个车辆信息给它删掉啊，那咱们要检查的首先第一就是页面上上面删，那这个是呃，组建自有的功能，它一定会删掉的，第二我们来看一下这个列表里上面删啊，这个刚才我们通过脚本已经实现了，第三我们看一下阿里云上面的这个文件上面上，那如果这些都做到了的话，就证明刚才我们的这段代码呢，已经。这个调试成功了啊，所以呢，我们来看一下，首先呢，我在这个地方点删除。好删完了之后呢，我这边我refresh一下看看。嗯，我看一下这先看一下这面哈。好像是，呃，这个图片删掉了，对不对啊，也就是说阿里云上面的这个图片确实是删掉了，然后接下来呢，我们来看一下，嗯，控制台这里。

控制台这面呢，它确实是执行了这个远程删除文件成功，也就是说这个地方。这个地方啊，它确实是打印出来了，然后下面这个地方叫this borrow borrow touch list等于this borrower，然后borrow a attach list.filter。然后这面呢，我们是function item return item image your，好，然后这个你写的对吧，对是吧，然后不等于fair response。Data URL，当它不等于这个fair response URL的时候呢，我们呢，就是想把它从整个的这个列表里移除掉，这个代码看起来应该是。没什么问题啊。Dis as borrow attach list。

好，所以现在呢，我们已经实现了前面的啊两个目标，就是已经把文件呢从页面当中删掉了，也已经把文件呢，从我们的这个阿里云的这个控制台上删掉了，但是最后一个目标呢，从这个调试信息来看的话，好像它这个文件还在这是吧，你看看这个还在这，诶刷一下就好了，就说明我们刚才的这个是成立的还是成立的，只不过调试工具这一块呢，有一点反应迟钝了，就说明刚才我们这个代码写的呢，也都是正确的，那么回过头来，刚才我又点了一下这个刷新，发现刚才的这个啊。文件呢，就是第三个，所以是三的这个文件呢，就不在了，是不是就说明咱们这程序其实是好使的，那咱们再来试一个是一个这个房产信息吧，这个房产信息的话呢，我们是上传到了。

应该是。这个house里面，然后呢，20210306，然后呢，还是10:18，应该是这张图片啊，这是咱们这个房产信息的这张图片，然后呢，我们来执行一下删除，看看能不能把它删掉，这个加载的还是有点慢。好加载下来了，然后呢。啊，接下来呢，我们在这面就执行一下删除还是删他。好删掉了，删掉了之后呢，还是来看一下这面的数据，这个OS这面刷新什么情况。哎，没了，反应有点慢哈，啊，这个就没有了啊，删掉了，删掉了之后呢，然后咱们再来看一下这面。这面呢，你看我们还是要刷新一下这个列表，刷新好这边就没有了，就证明呢，我们那个信息记录呢，已经被我们删掉了，明白吧？啊，所以大家一定要会测试啊，知道怎么去测，然后知道怎么测试成功的测试，然后还会知道测试当中可能会存在的一些就是延迟现象啊，这些大家都需要了解，才能真正的把我们这个程序调试好，那这块呢，就是啊，我们刚才做的事情了，好，那接下来呢，假设说我们现在要点击提交，那么我们现在提交的就是一个正确组装好的这么一个附件列表，对不对，所以到这儿为止，整个附件这块的处理我们才处理完成。